[blog] blogger에 highlight.js 적용하는 방법

Blogger에서 소스코드를 예쁘게 - Syntax Highlighter

블로그에 소스코드를 알록달록 예쁘게 달고 싶은 경우가 있습니다. 또한, 긴 코드가 아래로 쭉 나열되지 않고  좌우로 스크롤 되어야 이해하기도 쉽습니다.

Google Blogger에서는 <code> </code> 코드에 Syntax Highlighter을 입혀주기 위해서는 테마에 스크립트를 추가해야합니다. 다만, 파일을 구글 서버에 올릴 수 없다보니 cdn이 지원되는 코드여야 합니다.

highlight.js는 매우 다양한 언어와 설정파일 형식까지 지원하고, 언어를 나름 자동 인식하는 데다가 다양한 스타일까지 제공되고 있습니다. 현재 개발이 활발히 진행되고 있어 테마도 다양합니다. 

다만, 줄번호는 지원하지 않습니다. 

목  차

---

🧩1. Hightlight.js의 특징

🧩2. blogger 테마에 Hightlight.js 적용

🧩3. Hightlight.js 테마 고르기

🧩4. Hightlight.js 사용방법

---

🧩1. Hightlight.js의 특징

highlight는 JavaScript로 만들어져 있으며 독립적으로 실행됩니다.

• 개별 서버 뿐만 아니라 CDN을 지원하고 있어, Blogger에게는 안성맞춤입니다.
• 196 언어를 지원하고,  자동인식 기능이 있어 사용이 간편합니다.
• 242 개의 스타일 형식을 지원하며, 부가 기능 또한 막강합니다.
• Highlight.js 는 BSD License에 기반하며 세부 사항은 LICENSE 에서 확인 가능합니다.
• 공식사이트 https://highlightjs.org/

🧩2. blogger 테마에 Hightlight.js 적용

</head> 위에 3줄의 코드를 추가합니다.

• 블로그 대시보드에서 '테마'로 들어갑니다.
  
  
  
  
• 적용방법은 https://highlightjs.org/usage/ 에서 확인 가능하며 </head> 위에 아래 3줄의 코드를 추가하면 됩니다.
• 공식사이트 Usage에는 </link> 태그가 빠져있는데, 첫줄 마지막에 추가해주어야 오류가 나지 않습니다.

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

• 첫 줄은 테마 CSS파일을 나타냅니다. 테마를 변경하려면 첫줄 default.min.css 파일명을 해당 테마 파일명으로 수정하면 됩니다.
• 두번째 줄은 실행 js파일이고, 세번째 줄은 웹페이지에서 실행되도록 로딩해주는 코드입니다.
• 이제 남은 과정은 테마를 고르는 것입니다.

🧩3. Hightlight.js 테마 고르기

테마 갤러리에서 원하는 테마를 선택하고, 테마명을 메모합니다.

• 데모 사이트로 이동합니다. https://highlightjs.org/static/demo/
  
  
  
  
  
• 좌측 메뉴에서 원하는 테마를 고르고, 오른쪽에서 언어별 결과를 확인합니다.
• 원하는 테마를 골랐다면, 테마 파일이 있는 Github로 이동합니다. 
• 테마명과 동일한 파일명을 찾아 메모합니다.
• 2번에서 추가한 </head> 상단 3줄 코드 중 첫번째 코드의 css 파일명을 원하는 테마 파일명으로 변경합니다.

🧩4. Hightlight.js  사용방법

본문에 적용할 때 html 코드 모드에서 <pre></pre>를 넣어주면 됩니다.

• Hightlight.js는 언어를 자동감지 하지만 언어감지가 안될 때에는 <code 언어명시></code>를 추가해줍니다.
• css 코드의 경우 language-css 라고 명시해주면 됩니다.

<pre><code class="language-css">...</code></pre>

• 지원 언어의 class 값은 Supported Languages 에서 확인 가능합니다.
• 대표적인 언어 class 값입니다.

Language	Classes
CSS	css
HTML, XML	xml, html, xhtml, rss, atom, xjb, xsd, xsl, plist, svg
JSON	json
Java	java, jsp
JavaScript	javascript, js, jsx
Python	python, py, gyp

추가 참고 자료

highlight.js Github 에서 더 많은 최신정보을 알아보세요.

Blogger에서 소스코드를 예쁘게 - Syntax Highlighter 게시글을 참조하였습니다.