이번에 소개할 Syntax Highlight Java Script 는 뭐하라님의 Material-T mk5 를 블로그에 적용 하면서 기존의 것이 제대로 동작하지 않고, 많은 문제를 야기 하기에 이를 해결 하기위해 여러 방법을 찾다 찾은 최적의 솔루션이라 하겠습니다.
기존의 Tistory 의 뭐 같은 호환성 때문에 images 테마 쪽에 올리고, HTML 및, CSS 를 미친듯이 수정하던 노가다를 피해, 최소의 수정만으로 최고의 효과를 볼수 있도록 만들어 졌으며, 해당 서버가 죽지 않는 이상 계속 유지가 되는데다, 버젼별 구분을 지원 하고 있는 등의 여러 장점이 있습니다.
일단, 블로그 내에서 코드를 제대로 보기 편하게 제공하는게 어딘가요.
Tistory 에서 이 스크립트를 적용 하려면 HTML 과 CSS 를 조금만 수정 하면 됩니다. 먼저 TiStory 개인 설정 부분에서 HTML 에서 <body .. > 윗 부분에 다음 3줄을 추가 합니다. (아래 이미지 참조)
<link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/9.9.0/styles/agate.min.css">
<script src="//cdn.jsdelivr.net/highlight.js/9.9.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
그리고 우리말 표시가 제대로 되게 하기 위해서는 CSS 도 손 봐야 합니다. 아마 굴림체로 바로 나오는 문제가 있으므로, 저는 다음과 같이 맑은 고딕 (물론 이게 Windows 나 해당 OS 에 설치 되어 있어야 하는 단점은 피하지 못합니다) 으로 0.9em 크기로 출력 되도록 CSS 마지막 라인에 추가 해 주었습니다.
code { font-family : consolas, malgun gothic; font-size: 0.9em; }
그리고 TiStory 에 글을 쓸 때엔 아래 처럼 <pre><code class="사용할 코드"> ... </code></pre> 로 묶어 주면 되며, 이는 이전의 SyntaxHighlight 와 비슷하다 보시면 됩니다.
이제 제 블로그에 기존 글들 다 수정 해야 하긴 합니다만, 이게 필요 하신 분들은 편리한 사용이 되시길 바라겠습니다. 덤으로 기존에 Delphi 로 만들어 두었던 변환툴도 업데이트 해야 할듯 합니다.
