티스토리에 highlight.js 적용하기

 hightlight.js 소개

highlight.js는 자바 스크립트로 만들어진 Syntax Highlighter 라이브러리 입니다.

출처: http://far-go.tistory.com/admin/entry/post/preview.php [SCRIPT

highlight.js는 자바 스크립트로 만들어진 Syntax Highlighter 라이브러리 입니다.

현재까지 185개의 언어와 89가지 스타일을 지원하며 자동 언어 탐지, 다중 언어 구문 강조 등의

기능을 가지고 있습니다. node.js와 모든 markup 에서도 잘 작동하며 js 플랫폼과 호환됩니다.

 - 더 자세한 설명은 highlight.js document에서 확인

 

 적용하는 법

1. 먼저 highlight.js 사이트에 들어갑니다.

https://highlightjs.org/

2. get version 버튼 클릭!

3. 사용할 언어를 선택해줍니다.

- 기본으로 제공하는 22개의 언어외에 다른 언어가 필요하면 추가로 체크해서 다운받습니다.

4. 스타일 지정

본격적으로 티스토리에 적용하기 전! 먼저 소스 코드를 어떤 스타일로 지정할지 골라야합니다.

highlight.js demo에 들어가면 여러 데모를 보실 수 있습니다.

5. 티스토리에 적용

다운로드가 완료되면 압축을 풀고 아래 사진과 같은 파일이 있는지 확인합니다.

잘 다운받은게 확인됐다면 highlight.pack js파일과 styles 폴더 속

자신이 사용할 css파일을 '스킨 편집 -> 파일 업로드'로 이동해 넣어줍니다.

'

5. 1 줄번호 플러그인 적용

highlight.js에서는 line numbers 플러그인을 지원합니다.

github_plugin 깃헙에서 플러그인을 다운받아

js와 css파일을 업로드했던 곳에 똑같이 넣어줍니다.

모든 업로드 과정이 완료됐다면 스킨편집 -> html에서 ctrl+f를 눌러 </head>를 검색합니다.

그리고 아래 코드를 </head> 바로 위에 넣어줍니다.

<link rel="stylesheet" href="./images/railscasts.css">
    <script src="./images/highlight.pack.js"></script>    
    <script src="./images/highlightjs-line-numbers.min.js"></script>
    <script>
        hljs.initHighlightingOnLoad();
        hljs.initLineNumbersOnLoad();
    </script>

주의! 저는 railcasts 스타일을 사용하고 있습니다. 여러분은 자신이 사용할 스타일 이름으로 변경해주세요

<link rel="stylesheet" href="./images/스타일 이름.css"> 

html에 코드를 넣으셨으면 이제 아래 코드를 css 맨 하단부에 넣어줍니다.

.hljs-line-numbers{
       -webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	text-align: center;
	border-right:1px solid #ccc;
	color:#999;
	vertical-align: top;
        padding-right: 3px;
}

6. 최종

글 작성시 오른쪽 체크박스를 누르고 html에 들어가 아래와 같이 적어주면 소스 코드 구문강조가 적용됩니다.

<pre><code>소스 코드</code></pre>

7. 추가로

- 언어지정

<pre><code class="사용할 언어">소스 코드</code></pre>

- 스타일 사용 안하기

<pre><code class="nohighlight">소스 코드</code></pre>

---

위 방법외에도 CDN으로 간단하게 코드 하이라이트를 적용시키는 방법이 있습니다.

만약 사용해야할 언어가 기본으로 제공하는 22개의 언어에 해당한다면 CDN을 고려해보세요 :)

CDN 사용법은 아래 블로그에서 참고하시면 됩니다.

http://webdir.tistory.com/439

*포스트 속 모든 코드는 highlight.js를 사용하여 작성했습니다.