 |
| By Iwan Gabovltch |
개발과 관련된 블로그이다 보니, 소스코드를 자주 넣어야 하는데 그때마다 Syntax Highlighter가 아쉽곤 했다. Wordpress라면 플러그인 형태로 제공되는 다양한 선택사항이 있지만, 여기는 Google Blogger이니 직접 손으로 때워야 한다.
Google Blogger에서도 Syntax Highlighter를 사용할 수 있는 옵션들은 몇개 있다. 그 중에서 하나를 고르기 위해 다음과 같은 기준을 세웠다. 이 기준은 귀차니즈머의 취향이 99% 반영된 것이다.
- 여러개의 .js 파일이나 .css 파일을 링크하는 건 싫다. 너무 로딩에 오래 걸린다.
- 줄 번호가 출력되면 좋겠다.
- jQuery같은 외부 의존성이 없으면 좋겠다.
- 너무 화려하거나 튀지 않는 스타일이 지원되어야 한다.
WebDesignBooth에서 Blogger에서 쓸 수 있는 Syntax Highlighter 9가지를 정리해 놓아서 후보군을 정하기는 쉬웠다.
가장 많이 쓰이는 Syntax Highlighter는 Alex Gorbatchev의 것이다. 역사도 오래 되었고, 기능도 막강하지만... 결정적으로 필요한 언어마다 브러쉬라고 하는 별도의 Javascript 파일을 로딩해야 하는 것이 불만이었다. 그래서 일단 이것은 제껴두었다.
SHJS 또한 언어별로 별도의 .js파일을 로딩해야 해서 제외했다.
highlight.js는 매우 다양한 언어와 설정파일 형식까지 지원하고, 언어를 나름 자동 인식하는데다가 다양한 스타일까지 제공되어 마음에 들었다. 그런데 결정적으로 줄번호를 지원하지 않았다. 저작자는 줄번호가 보기 지저분하고, 코멘트로 해결할 수 있는데 굳이 넣을 이유가 있느냐고 주장하는데 나름 일리있다. 크기는 42KB이다.
code-prettify는 대부분의 언어들을 한 파일에서 지원하고 간단하게 사용할 수 있어 마음에 들었다. 그런데 실제로 테스트 해보니 Blogger와 궁합이 잘 맞지 않는 것 같다. 크기는 17KB이다.
Rainbow는 간단한 구성으로 마음에 들지만, 결정적으로 줄번호를 지원하지 않아 문제였다. 누군가가 줄번호를 지원하는 패치를 만들기는 했지만... 귀찮다. 크기는 28KB이다.
나머지 Syntax Highlighter들은 모두 jQuery 같은 외부 의존성이 있어서 제외했다.
Prism도 꽤나 괜찮아 보였지만, CDN 호스팅을 제공하지 않아 Blogger 사용자에겐 좀 불편하다. 물론 사용 언어와 스타일에 따라 정교하게 Javascript를 만들 수 있어서 좋다. 그리고 줄 번호, 줄 강조 등의 플러그인도 같이 제공된다.
결론적으로 선택한 것은 highlight.js이다. 사용법도 쉽고 기능도 막강해서 다른 선택의 여지가 없었다.
마지막으로 Ivan Sagalaev가 Syntax Highlighter들을 비교한 글도 참고하기 바란다.
highlight.js 세팅
이제 highlight.js를 어떻게 설치하는지 살펴보자. highlight.js는 다운로드 받아 자신의 서버에 설치해도 되지만, CDN에 등록된 것을 사용해도 된다. Blogger는 어쩔 수 없이 CDN에 등록된 것을 써야 한다.
설치 방법 문서에 약간 잘못된 것이 있는데, link태그를 닫지 않으면 Blogger 템플릿 수정하고 저장할 때 에러가 난다. 그러므로 끝에 link를 닫아 주어야 한다.
highlight.js를 적용하려면 Blogger "디자인" 메뉴로 들어가서 "템플릿"을 택하고 "HTML 편집"을 클릭한 뒤 아래 그림처럼 head 끝부분에 세줄의 코드를 넣어주면 된다.
위 예에서는 github 스타일을 사용했는데, 맘에 들지 않는다면 여기서 골라서 여기에 있는 이름으로 바꾸면 된다. 예를 들어 Googlecode 스타일로 하고 싶으면 googlecode.min.css로 바꾸면 된다. (나는 나중에 obsidian 스타일로 바꿨다.)
수정을 다 했으면 저장하고 나오면 된다. 이렇게 하면 설치는 완료되었다.
사용법
Java 같은 코드는 다음과 같은 식으로 pre와 code 태그로 감싸 주면 된다. class에 "language-java"로 써 준 것은 highlight.js가 자동으로 언어를 잘 인식하기 때문에 생략해도 되지만, 잘 인식하지 못할 경우 저렇게 써주면 된다.
<pre><code class="language-java">/* CallingMethodsInSameClass.java
*
* illustrates how to call static methods a class
* from a method in the same class
*/
public class CallingMethodsInSameClass
{
public static void main(String[] args) {
printOne();
}
public static void printOne() {
System.out.println("Hello World");
}
}</code></pre>그러면 아래와 같이 예쁘게 나온다.
/* CallingMethodsInSameClass.java
*
* illustrates how to call static methods a class
* from a method in the same class
*/
public class CallingMethodsInSameClass
{
public static void main(String[] args) {
printOne();
}
public static void printOne() {
System.out.println("Hello World");
}
}그런데 pre/code 태그 안에 또 html 태그나 부등호 같은 기호가 들어가면 이를 escape해 주어야 한다. 이게 좀 귀찮은 일이긴 하다.
이런 일을 해주는 서비스가 온라인 상에 많이 있긴 한데, 나는 주로 accessify를 이용한다. 다음 URL을 등록해 두었다가 활용하면 된다.
http://accessify.com/tools-and-wizards/developer-tools/quick-escape/default.php
사용할 HTML코드를 위 서비스를 이용하여 escape시킨 뒤에 그것을 pre/code 태그 안에 넣어주면 된다.
<pre><code class="language-html"><h2 style="color:red">I am Red</h2>
<h2 style="color:blue">I am Blue</h2></code></pre>그러면 이렇게 예쁘게 나온다.
<h2 style="color:red">I am Red</h2>
<h2 style="color:blue">I am Blue</h2>추가적인 스타일링
highlight.js를 적용해 보면 pre 블럭의 마진이 너무 크고, 폰트도 본문의 것과 같아 다소 어색하다.
이것을 좀 더 다듬으려면 Blogger 디자인 메뉴로 들어가 "템플릿" -> "맞춤설정" -> "고급" -> "CSS 추가"로 가서 다음의 내용을 적당히 수정해서 추가하면 된다. 경우에 따라서는 HTML을 직접 편집해야 할 수도 있다.
그리고 wan2land 님의 노력으로 D2Coding 폰트를 적용할 수도 있게 되었다. 자세한 내용은 https://github.com/wan2land/d2coding 에서 확인하고, 설명대로 폰트 URL을 넣었다면 font-family 설정으로 D2Coding 폰트를 적용할 수 있다.
.hljs {
margin: 0px 0px;
font-size: 80%;
line-height: 1.3em;
font-family: 'D2Coding', monospace;
}
댓글 없음:
댓글 쓰기