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

블로그를 하면서 중요한것을 꼽자면 그 중 하나에 블로그 디자인도 꼭 포함되는 것 같습니다. 제 블로그의 방문자들이 블로그가 예뻐야 오래보고싶고(?) 다른페이지도 구경하고싶고 그렇지 않겠습니까? 디자인도 이상하고 광고만 덕지덕지 붙어있는 블로그라면 들어오자마자 뒤로가기 버튼을 누르고 싶어질겁니다. 코딩블로그는 제 블로그가 아니라도 많으니까요. 이전 포스팅에서도 언급했다시피 저는 본래 본문에 소스코드를 넣을때 SyntaxHighlighting을 사용했었습니다. 하지만 이젠 그렇지 않죠. 지금은 Highlight를 사용해서 본문에 소스코드를 삽입하고있습니다. 이번 포스팅에서는 제가 SyntaxHighlighting에서 Highlight로 넘어간 이유와 SyntaxHighlighting와 Highlight의 장단점에대해 알아보도록 하겠습니다.

 

SyntaxHighlighting vs Highlight.js (장단점 비교분석)

1. 속도

제 블로그에 똑같은 소스에 SyntaxHighlighting와 Highlight.js를 각각 입힌 후 테스트를 해보았습니다. 그 결과는 Highlight.js의 승리였습니다. 속도차이도 은근히 많이났습니다. 평균적으로 약 1초~2초정도의 속도차이를 보였는데 이 정도 속도차이라면 느린것을 제일 싫어하는 저희 한국인에게 있어서는 어마어마한 차이입니다.

 

2. 디자인

위에 보시는 위쪽 사진이 SyntaxHighlighting를 입힌 코딩소스이고 밑의 사진이 Highlight.js를 입힌 코딩소스입니다. 차이점을 느끼기 위해 동일한 소스, 비슷한 Dark계열의 템플릿을 적용했습니다. 디자인의 차이가 좀 느껴지시는지요?

 

3. 기능

☞ 우선 가장 큰 차이가 나는 것은 바로 줄표시기능입니다. SyntaxHighlighting는 줄표시 기능이 있지만 Highlight.js는 줄표시 기능이 없죠. 하지만 저는 줄표시 기능이 꼭 있어야 할 필요를 느끼지 못하였습니다. 오히려 지저분한 느낌만 주는듯한 느낌적인 느낌이였거든요.

 

☞ SyntaxHighlighting은 코딩소스에 Inline효과를 줍니다. 가로로 스크롤이 길어지면 스크롤바를 줘서 보여주는 형식이죠. 하지만 스크롤바가 필요없는 경우에도 스크롤바가 생기는경우가 많아 미관상으로는 썩 좋지않습니다. 하지만 꼭 있어야하는 기능은 맞죠. 이 기능을 Highlight.js에는 제공하지 않아요. 이건 정말 심각한 문제입니다. 스크롤바를 안주고 밑으로 표시가 되게끔 만들어버리면 화면이 작은 디바이스(모바일)같은경우에는 코드가 뒤죽박죽으로 표시되버려 가독성이 극도로 떨어집니다. 하지만 CSS기능에 가로가 overflow시 스크롤바를 주게 만들어주면 이 문제는 해결할 수 있습니다. SyntaxHighlighting같이 쓸데없이 가로스크롤바가 생기는현상도 나타나지 않더군요. 이 방법은 다음 포스팅에서 알려드리도록 하겠습니다. 

 

☞ Highlight.js를 사용하면 티스토리의 저작권자표시 플러그인을 사용할 수 없습니다. 만약 이 플러그인을 사용하게 되면 코드 복사시 한줄로 쭉 이어져서 복사가 되는 장면을 목격할 수 있습니다.... ㅠㅠ 코딩블로그의 꽃은 복사 붙여넣기인데 이게 안되다녀....... 이 문제는 해결방법이 거의 없을듯하네요... 직접 플러그인을 까볼수도 없는 노릇이고.... 이거 고쳐볼려고 몇시간동안 삽질했는데 이 문제는 제 역량으로는 못 고칠것 같습니다.....

 

 

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

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

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