Blogger에서 코드에 Syntax Highlight 적용하기. highlight.js

highlight.js를 사용하기로 한다. 사용법도 쉽고 기능도 막강하다 1). 필요한 파일을 업로드할 수 없으니, CDN 서버를 사용한다 2).

설치방법

Blogger의 디자인 >> 테마 >> HTML 편집으로 간다. </head> 를 찾아서 그 위에 부분에 다음 코드를 입력한다 3).

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"></link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

사용법

다음과 같이 사용한다. 현재는 c#이다. 다른 언어들도 제공한다 4).

<pre><code class="csharp">...</code></pre>

단, html을 사용할 때는 변환이 필요하다 5). 위의 코드는 다음과 같이 설정했다.

<pre><code class="html">&lt;pre&gt;&lt;&lt;code class="csharp"&gt;...&lt;/code&gt;&lt;/pre&gt;</code></pre>

스타일 변경을 위해서, Blogger의 디자인 >> 테마 >> 맞춤설정 >> 고급 >> CSS 추가 에서 다음을 입력한다 1).

pre {
    margin: 0px 0px;
    font-size: 80%;
    line-height: 1.3em;
}

각주

1. http://ddmix.blogspot.com/2015/11/syntax-highlighter-blogger.html
2. https://cdnjs.com/libraries/highlight.js
3. https://highlightjs.org/usage/
4. https://highlightjs.readthedocs.io/en/latest/css-classes-reference.html#language-names-and-aliases
5. http://accessify.com/tools-and-wizards/developer-tools/quick-escape/default.php