반응형
highlight.js가 적용된 code block에 가로 스크롤 기능을 추가해주는 내용
Syntax Highlight의 경우에는 기본적으로 가로 스크롤이 제공되지만
Highlight.js의 경우에는 그렇지 않은 경우가 발생한다.
※ version에 따라 설정하지 않아도 될 수도 있다.
만약 한 줄의 코드가 충분히 길었을 때, 가로 스크롤 없이 강제로 다음 줄로 넘어가는 경우에는
가독성이 현격하게 떨어진다. 이는 모바일 환경이라면 더욱 심할 것이다.
tistroy 블로그 설정에서 "스킨 편집" 선택
"html 편집" 선택
"css" 선택 후 코드 추가
.hljs
{
white-space: pre;
overflow-x: auto;
}
반응형
'Tistory 운영' 카테고리의 다른 글
[Tistory] Code Block 디자인 비교 (0) | 2021.02.15 |
---|---|
[Tistory] highlightjs-line-numbers.js 적용 (0) | 2021.02.15 |
[Tistory] Syntaxhighlighter v4 적용 (0) | 2021.02.15 |
[Tistory] SyntaxHighlighter v3 적용 (0) | 2021.02.15 |
[Tistory] [Code Block] Color Scripter 이용하기 (0) | 2021.02.15 |
댓글