[블로그] 코딩소스에 하이라이트(코드블럭) 넣는법 (Highlight.js)

저는 이때까지 본문에 코드를 올릴때 SyntaxHighlighting을 사용하였는데요. 계속 쓰다보니 단점이 한 두개가 아니더라구요. 그래서 다른 코드하이라이터를 찾던 중  Highlight.js를 발견하였고 비교분석 결과 Highlight.js가 더 낫다는 결론을 내렸습니다. 하이라이터를 바꾸려면 본문의 소스가 있는 부분마다 일일이 다 수작업으로 바꿔주는 작업을 해야하기에 글이 더 많아지기전에 최대한 빨리하는게 낫다는 판단하에 오늘부터 하이라이터를 차근차근 바꿔보려고 합니다.

 

1. 176개의 언어와 79개 스타일을 제공하고 자동으로 언어를 감지해서 스타일이 적용되며 둘 이상의 언어라도 가능하다. 

2. 노트.js에서 사용 가능하며 어떠한 마크업(태그)라도 동작한다. 

3. 어떠한 자바스크립트 프레임워크라고 하더라도 호환이 가능하다.

4. 설계당시 가볍고 간단하게 만드는 것이 목표였고 단조로운 기능에 빠른 로딩속도를 자랑한다.

- highlightjs.org 본문발췌 -

 

티스토리 블로그에 Highlight를 적용시키는 방법은 두가지가 있습니다.

하나는 직접 다운받아 사용하는 방식이고 또 다른 하나는 CDN주소를 활용해 끌어다 쓰는 방법이 있습니다.

하지만 저는 두가지 방식중에 전자를 추천드립니다. (다운로드 VS CDN)

그 이유는 CDN에서 주소를 끌어다쓰면 코드 몇줄로도 간편하게 하이라이터를 적용시킬 수 있긴 하지만

끌어다 쓰는데 한번 페이지를 띄우는데 한번 이렇게 자원소모를 두번을 하게 됩니다.

또한 필요없는 언어도 포함하여 끌어오기 때문에 로딩속도에 악영향을 끼칠 수 있습니다.

 

이번 포스팅에서도 다운로드하여 본문에 하이라이터를 적용시키는 방식에 대해서 다루겠습니다.

 

티스토리 블로그 코딩소스에 하이라이트 넣는법 (Highlight.js)

1. 공식홈페이지로 들어갑니다.

Highlight.js 공식홈페이지

홈페이지에서 오른쪽 Get version버튼을 눌러줍니다. 버전은 보는 시점에 따라 달라질 수 있습니다.

 

 

2. 자신이 사용하고싶은 언어를 체크하고 밑에 Download버튼을 눌러줍니다.

 

3.. 티스토리 블로그 관리 -> 스킨편집으로 들어갑니다.

 

4. 파일 업로드에서 추가 버튼을 누릅니다.

 

5. 아까 다운받았던 폴더에서 highlight.pack.js와 styles폴더에서 자신이 입히고 싶은 테마를 업로드합니다.

테마는 밑에 링크에서 미리 확인하실 수 있습니다.

Highlight테마 데모보기

개인적으로 테마를 추천드리자면 어두운 회식배경의 Androidstudio테마, 흰색배경의 GitHub테마, 검은색배경의 Monokai Sublime테마가 이쁜것 같아요.

 

6. HTML탭으로 가서 아래의 코드를 위 사진 처럼 아래의 메모장에 있는 코드를 붙여 넣어줍니다.

Highlight.txt

다운로드

 

7. 그런 뒤 본문의 HTML 태그에서 

<pre><code>

코드를 넣어주시면 됩니다.

</code></pre>

이렇게 넣어주면

보시는 바와 같이 하이라이터가 잘 입혀져 나오는것을 볼 수 있습니다.

 

 

[블로그] Syntax Highlighting vs Highlight.js (장단점 비교분석)

[블로그] Highlight.js의 각종 문제점 & 해결방법