구문강조 hightight.js

게시자: 대문 demun 카테고리: 퍼블리셔/기술 2014.06.02 06:00

hightight.js

제가 오늘 소개해드릴 스크립트는 바로 highlight.js 입니다.
블로그를 하다보면 코드를 하이라이트 하고 싶을 때가 있습니다.
많은 자바스크립트가 있는데 그중에 highlight.js 를 소개하는 이유가 있습니다.

이글은 2011년도에 작성한 글입니다. 그래도 참고하기에는 좋은 글이기에 이렇게 적습니다.
자바스크립트 구문광조 비교 : http://softwaremaniacs.org/blog/2011/05/22/highlighters-comparison shjs 자바스크립트는 원문에서 비교했는데 여기서는 뺐습니다.

뭐가 좋다라고 얘기하기에는 무리가 있을 수 있지만 참고하여 뭘 사용할지는 알수 있겠지요.

홈페이지 -> http://highlightjs.org/

우리가 자주 사용하고 유명한 코드 하이라이트 자바스크립트를 비교한 테이블입니다.

highlight.js SyntaxHighlighter Google Code Prettify
사용자 태그 yes no yes
줄 번호 no yes yes
줄무늬 배경 no yes yes
공백,탭 들여 쓰기 yes yes no
언어 감지 yes no yes
다중 언어 코드 yes yes yes
코드에 대한 임의의 HTML 컨테이너 yes no no
HTML5 호환성 yes no no

각 코드별로 테스트를 한 페이지 입니다.

highlight.js , SyntaxHighlighter , Google Code Prettify


크기

크기도 highlight.js 가 가장 가볍게 나옵니다.

highlight.js SyntaxHighlighter Google Code Prettify
크기 (KB) 16.4 34.6 19.2


속도

속도도 highlight.js 가 우수하네요.

highlight.js SyntaxHighlighter Google Code Prettify
로드 시간 (msecs) 870 1394 1007
강조 시간 (msecs) 55 67 72

결론

뭘 사용할지는 사용자의 관점이지만 highlight.js 가 가볍고 빠릅니다.
하지만 단점도 있죠. 바로 줄번호가 나오지 않는 점입니다. 하지면 highlight.js 는 Sublimetext 의 테마도 있습니다. 거의 똑같이 구문이 강조되어 표시됩니다. 물론 github 사이트의 테마도 있지요.

highlight.js 는 속도와 가벼움 측면에서 추천. SyntaxHighlighter 와 Google Code Prettify 는 다양한 표현에서 추천하는 바입니다.

물론 모두 티스토리 블로그에 적용할 수 있습니다.




신고

댓글