[블로그] Highlight.js의 각종 문제점 & 해결방법

이전 포스팅에서도 언급했다시피 저는 본래 코드 하이라이터를 Syntax Highlighting을 사용했었습니다. 하지만 새로 바꾼 코드 하이라이터인 Highlight.js도 많은 문제점을 가지고 있더군요. 이번 포스팅에서는 Highlight.js의 각종 문제점에 대해 알아보고 그 문제점을 해결해보는 시간을 가져보도록 하겠습니다. 

티스토리 저작권자 표시 플러그인을 사용할 수 없다. 

Highlight.js를 사용하면 티스토리 저작권자 표시 플러그인을 사용 할 수 없습니다. 정확히 말하자면 사용할수는 있으나 이 플러그인을 사용하는 순간 그 코드를 복사해서 다른곳에 붙여넣으면 코드에 Enter가 안먹힙니다. 개행 없이 일렬로 쭉 나열되는 상황을 목격하실 수 있을겁니다. 아래 그림처럼요. 

↑티스토리 저작권자 표시 플러그인을 사용한 뒤 Highlight.js를 Ctrl + C & V 시 나타나는 현상

글이 가로로 길어지면 개행이 된다. 

제가 예전에 사용하던 Syntax Highlighting에서는 글이 가로로 길어지게되면 스크롤바를 생성해서 Inline형태로 표시했습니다. 하지만 Highlight.js는 개행처리를 해버리더라구요. 하지만 이렇게되면 화면이 작은 디바이스에서는 코드가 뒤죽박죽처럼 표시되어 가속성이 극히 떨어집니다. 이 문제는 코드편집 CSS에서 코드를 추가해 해결해줄 수 있습니다.

 ← 모바일 화면에서 본 Highlight.js 적용 코드 (코드 가독성이 떨어진다.)

해결방안 ↓

1. 티스토리 관리 -> 스킨편집에 들어갑니다.

2. CSS탭에 아래코드를 삽입해줍니다. 

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

3. 코드의 가로 사이즈가 overflow시 스크롤바가 생성되어 코드의 가독성이 향상된것을 볼 수 있습니다.

[블로그] Syntax Highlighting vs Highlight.js (장단점 비교분석)

[블로그] 코딩소스에 하이라이트 넣는법 (Highlight.js)

[블로그] 하이라이트 코딩소스 넣는법 (SyntaxHighlighting )