[Tistory] Code Block 가로 스크롤

highlight.js가 적용된 code block에 가로 스크롤 기능을 추가해주는 내용

- [Tistory] Highlight.js 적용

- [Tistory] highlightjs-line-numbers.js 적용

Syntax Highlight의 경우에는 기본적으로 가로 스크롤이 제공되지만

Highlight.js의 경우에는 그렇지 않은 경우가 발생한다.

※ version에 따라 설정하지 않아도 될 수도 있다.

 

만약 한 줄의 코드가 충분히 길었을 때, 가로 스크롤 없이 강제로 다음 줄로 넘어가는 경우에는

가독성이 현격하게 떨어진다. 이는 모바일 환경이라면 더욱 심할 것이다.

 

tistroy 블로그 설정에서 "스킨 편집" 선택

 

"html 편집" 선택

 

"css" 선택 후 코드 추가

.hljs
{
    white-space: pre;
    overflow-x: auto;
}