Apply syntax highlighter to Google Blogger(Blogspot) - highlight.js

구글 블로거(블로그스팟)에 syntax highlighter 적용하기

in order to apply "highlight.js"

add the three lines below in the head section

1.블로그스팟 테마에 들어가서 2. html 편집을 들어간 뒤 3. 아래 세줄을 head 섹션 안에 추가 한다.

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/styles/obsidian.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>

아래와 같이 pre 태그안에 code 태그를 쓰고 class를 "language-쓰려는 언어"로 작성하면 된다. pre 태그 안에 꺽쇠괄호가 인식이 안되므로, & l t ; & g t ; 를 사용하여 작성한다.

<pre><code class="language-html"><h1> class="language-html"</h1>
<h1> class="language-js" </h1></code></pre>

pre 태그에 css를 추가로 설정하려면 1.블로그스팟 테마 메뉴 - 2.맞춤설정 - 3.고급 - 4.css 추가 를 선택한 뒤 코드를 추가한다.

pre {
    margin: 0;
    font-size: 1.0rem;
    line-height: 1.5;
}