티스토리 마크다운 코드 하이라이팅 ( tistory markdown code highlighting )

tistory_markdown_highlight

https://github.com/umbum/tistory_markdown_highlight

매번 <pre><code class="language-\*"></code></pre> 입력하기 너무 귀찮아서 markdown의 highlighting 문법 ```을 티스토리에서도 사용할 수 있도록 만들었다. 이 블로그에는 prismjs와 함께 적용되어 있다.

highlightjs

쓸만한 테마는 light theme 중에서는 atelier-forest-light atom-one-light

장점

• ARM assembly, Intel x86 assembly, Shell Session 등 별 희한한 언어 까지 다 지원해준다.
• CDN을 지원한다. cdn에 올라와있는 js는 23 language만 지원하므로 이것만 필요하면 그냥 cdn에서 불러와서 사용해도 된다.

css도 마찬가지. 웬만하면 !important로 해결 가능하기 때문에 css를 수정할 필요가 없는 경우 그냥 cdn에서 받아서 쓰는게 편하다.

단점

• 자동으로 언어를 인식하기 때문에, highlighting이 필요하지 않을 때는 class=nohighlight를 적어줘야 한다. 이 때 스크롤이 안생겨서 pre-wrap을 사용해야 글씨가 삐져나가지 않는데 pre-wrap을 적용하면 다른 language에 스크롤이 아예 안생긴다. 어찌어찌 해결할 수는 있지만 번거롭고 불편함.
• code tag만 적어서 사용하는 inline highlighting이 안된다. 사실 이게 제일 큰 단점인 듯.

prismjs

highlightjs와 반대다. assembly 지원 안하고, CDN 없고 자동으로 언어 인식 안하기 때문에 highlighting이 필요하지 않으면 <code>만 쓰면 되고 <pre>없이 <code class=language-\*>만 적으면 inline highlighting된다. http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+c+bash+cpp+http+java+json+kotlin+php+php-extras+python+sql&plugins=toolbar+keep-markup+copy-to-clipboard