Tistory 코드블록 좌우 스크롤 활성화

기본 코드블록 안에서 줄바꿈이 되는 경우에 아래 스크린샷과 같이 자동으로 줄바꿈이 되어 코드로서는 가독성이 떨어지는 현상이 발생한 것을 발견했습니다. (필자가 JB Factory 라는 스킨을 적용하여 발생한 문제일 수도 있습니다.)

"원" 부분이 자동으로 줄바꿈되어버렸다.

CSS 편집에서 pre 태그의 CSS 속성을 다음과 같이 수정하였습니다.

/* ColdMater - 코드블록 좌우 스크롤 활성 2020-06-17*/
	pre { 
		margin: 20px 0px; 
		font-family: Consolas, Menlo, Monaco, "Courier New", monospace; 
		white-space: pre; 
		overflow-x: auto; 
	}

 

적용 결과는 아래와 같습니다. System.out,.println~ 부분이 좌우로 길기 때문에 스크롤하여 확인할 수 있습니다. 

    public static void main(String[] args) {
        int[][] coin = {{500, 100, 50, 10}, {20, 30, 15, 3}};

        int coinValue = 0;

        for(int i = 0; i < coin[0].length; i++) {
            coinValue = coin[0][i] * coin[1][i];
            System.out.println(coin[0][i] + ": " + coin[1][i] + "개 \t ," + coinValue + "원");
        }
    }