구문강조 hightight.js
- 퍼블리셔/기술
- 2014. 6. 2. 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 는 다양한 표현에서 추천하는 바입니다.
물론 모두 티스토리 블로그에 적용할 수 있습니다.