지금까지 Syntax Highlighter로 코드 하이라이팅을 하고 있었다. 근데 요놈이 업데이트가 안된지 오래됐기도 했고(블로그에 적용했던 게 v3.0.9인데 2014년에 나온 버전이다... 이후로 새롭게 v4가 나오긴 했는데 이건 티스토리에 적용하는 법을 모르겠어서 패스) 문법 강조가 영 만족스럽지 않아 다른 것을 찾아봤다. 찾다보니까 인라인 코드 기능도 있더라 그동안 Syntax Highlighter만 쓰느라 쓸 수 없어 몰랐던 기능인데...ㅠㅜ
SyntaxHighlighter 말고도 생각보다 많은 종류가 있었는데 Prism, highlight.js, google code prettify, SHJS, Rainbow, microlight.js, EnlighterJS 등이 있었다.
이것저것 비교해 봤는데 프리즘이 가장 낫다는 결론에 도달하고 바로 블로그에 적용해봤다.
먼저 Prism의 다운로드 페이지에 들어간다.
https://prismjs.com/download.html
뭔가 선택할 게 많아서 눈이 돌아간다. (지원하는 언어만 해도 152개!) 원하는 테마, 언어, 플러그인을 선택하고 밑에서 js와 css 파일을 다운 받으면 된다. 모든 언어를 체크해봤더니 용량이 300KB 가랑으로 커지는 바람에 Autoloader 플러그인을 이용하기로 했다. Autoloader 플러그인은 필요한 언어를 동적으로 로드한다.
일단 언어는 디폴트인 Markup(이 안에 html, xml, svg, mathml도 포함되어 있다.), CSS, C-like(많은 언어들이 이 언어를 상속받아 만들어져 있음), JavaScript 체크하고 Autoloader 플러그인을 선택했다.
각 언어들도 상속 관계가 있을 수 있으니 사용법과 예시는 여기(영어)를 참고하면 된다.
일단 내가 선택한 플러그인들에 대해 설명하자면
Line Highlight : <pre data-line="1-2,5,9-20"><code></code></pre> 이런 식으로 특정 줄 강조 가능
Line Numbers : <pre class="line-numbers"><code></code></pre> 이렇게 하면 줄 번호가 뜸. <pre> 태그에 data-start 속성으로 시작 번호 지정도 가능
Show Invisibles : 탭/공백 같은 모이지 않는 문자를 보이게 해줌
Autolinker : 코드에 URL이 있으면 자동으로 링크를 걸어 줌. [텍스트](주소) 이런 마크다운 문법도 사용 가능
File Highlight : <pre data-src="myfile.js"></pre> 이런 식으로 외부 파일을 가져와서 하이라이팅 가능. 툴바 플러그인을 사용하고 있다면 data-download-link data-download-link-label="다운로드" 속성 추가로 파일 다운로드 버튼 추가도 가능
Show Language : 언어 이름 표시 기능. <pre> 태그에 data-language 속성으로 표시할 이름 지정 가능
Previewers : angle, color, gradient, easing, time 속성에 대해 미리보기 기능 추가
Autoloader : 필요한 언어를 동적으로 가져옴. 자세한 건 후술
Normalize Whitespace : 앞뒤 공백 제거. 탭/공백 변환 기능도 있음. 자세한 옵션은 플러그인 설명 참고
Data-URI Highlight : Data-URI 부분도 하이라이팅
Toolbar : 코드 상단에 버튼을 추가할 수 있음. 디폴트 플러그인이고 일부 플러그인이 이 플러그인을 필요로 함. 자세한 설명은 플러그인 설명 참고
Copy to Clipboard Button : 코드 복사 버튼 추가. Clipboard.js라는 라이브러리를 사용하는데 이 라이브러리가 없어도 플러그인이 알아서 CDN에서 불러옴
나는 이렇게 체크하고 다운 받았다. 그리고 Autoloader 플러그인 페이지에서 "download all grammars" 링크를 눌러 모든 언어 파일을 다운 받는다. 기본적으로 압축된 언어 파일을 사용하도록 되어있으니까 굳이 필요 없는 압축 안된 파일(끝에 min이 붙어있지 않은 파일)은 지웠다.
이제 이 파일들을 블로그 관리 -> 스킨 편집 -> html 편집 -> 파일업로드에서 업로드한다. 그 다음 HTML로 들어가서 아래 코드를 <head> 태그 사이에 넣어 준다.
<link rel="stylesheet" href="./images/prism.css">
<script src="./images/prism.js"></script>
<script>
Prism.plugins.autoloader.languages_path = './images/';
Prism.plugins.NormalizeWhitespace.setDefaults({
'remove-trailing': true,
'remove-indent': true,
'left-trim': true,
'right-trim': true,
'spaces-to-tabs': 4
});
</script>
4번 줄은 Autoloader 플러그인을 사용 중이기 때문에 언어 파일들의 위치를 표시해준 것이고 5-11번 줄은 Normalize Whitespace 플러그인 설정이다. 개인적으로 스페이스보다 탭을 선호해서 저렇게 해놨다.
적용을 끝내고 이제 사용법을 알아보자
코드 블록을 만드는 방법은 아래와 같다.
<pre><code class="language-언어이름">
코드 내용
</code></pre>
인라인 코드는 <pre> 태그를 빼면 된다.
<code class="language-언어이름">코드 내용</code>
이게 기본적인 사용법이고 이제 여기에 위 플러그인 설명에 있는 내용처럼 <pre class="line-numbers"> 등 다양한 옵션을 줄 수 있다.
그리고 한번 사용해 봤는데
코드가 깨져서 나온다..ㅠㅠ 그래서 아래 CSS 코드를 추가했다.
pre code {
margin: 0;
padding: 0;
}
이 코드를 style.css에 추가하든 skin.html에 <style> 태그를 추가하든지 하면 된다. 이거까지 추가하면
짜잔하고 코드가 예쁘게 출력 된다.
하아.. 이제 예전 글들은 언제 다 수정하지..
'티스토리' 카테고리의 다른 글
| 블로그에 로딩바 넣기 (0) | 2014.07.09 |
|---|---|
| 카테고리 항상 펼쳐놓기 (0) | 2011.12.11 |
| BBCode 3.5 (8) | 2011.10.30 |
| 관리자로 로그인하면 애드센스 안보이게 하기 (3) | 2011.10.23 |
| 글 위에 애드센스 두 개 나란히 삽입하기 (0) | 2011.10.18 |
| 블로그 주소 하나로 통일하기 (11) | 2011.10.12 |
| 애드센스 가입방법 (2) | 2011.10.06 |
| 티스토리 단축키 (4) | 2011.10.03 |