Highlight source code in Blogger and posting
블로그 글에서 소스코드에 대해 알록달록하게 표시하려면 HTML편집에서 사용할 하이라이트 관련 소스를 입력하고 글을 작성할때 해당 하이라이트 코드를 입력하면 된다.
블로그에 HTML이나 코드 관련된 내용을 넣을 때 보기 편하게 하기 위해 사용하는 여러 가지 툴들이 있다. Syntax Highlighter, SHJS, code-prettify, Rainbow, Prism, highlight.js 등이 있는데 Syntax Highlighter와 SHJS는 언어별로 별도의 파일을 로딩해야 하는 단점이 있고, code-prettify는 Blogger에서 사용하기에 잘 맞지 않았고, Rainbow는 너무 단조로운 느낌이 있었다. Prisme은 CDN 호스팅을 제공하지 않아 구글 블로그 사용자에게는 불편했기에 최종적으로 선택한 툴은 highlight.js였다. highlight.js는 셋팅 방법이 간단하고 다양한 언어와 설정 파일 형식을 지원하며 다양한 스타일을 제공하지만 코드 줄 번호를 지원하지 않는다. 본 저자는 줄번호에 대한 미련은 없기에 선택에 망설임은 없었다.
1. Blogger에 템플릿에 highlight.js 셋팅하기
1.1. 블로거 관리자 로그인 ⇒ 템플릿(Theme) ⇒ HTML 편집으로 들어간다.
1.2. 그림처럼 아래 3줄의 코드를 <head> 끝부분에 입력한다.(highlight.js 사이트 설치 문서에 link 태그를 닫는 부분을 빠져있는데 이 부분을 주의해야 한다. link 태그를 닫지 않으면 Blogger 템플릿 저장할 때 에러가 출력되므로 </link>로 닫아준다.)
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"></link>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
1.3. 코드에 하이라이트 되는 부분을 사용자 스타일에 맞게 변경할 수 있다. (이 사이트 "Styles"항목에 목록을 선택하면 미리 보기 화면을 볼 수 있으며, 마음에 드는 스타일 이름을 해당 줄의 "default.min.css"에 default"를 지우고 입력함. 예를 들어 Agate 스타일로 하고 싶으면 agate.min.css로 바꿈.)
1.4. 저장 후 코드가 변경되었는지 확인한다.
2. highlight.js를 게시물에 적용하기
2.1. Post를 작성할 때 HTML 모드 상태에서 코드 종류에 맞게 pre와 code 태그로 아래와 같이 입력한다. highlight.js가 자동으로 언어를 잘 인식하지만 그렇지 않은 경우도 있기 때문에 class를 입력해준다.
<pre><code class="java">
public static void main(String[] args)
{
System.out.printf( "Hello world");
}</code></pre>
2.2. 저장하고 미리 보기로 확인한다. 아래와 보기 좋게 나온다.
public static void printOne() {
System.out.println("Hello World");
}※참고※
▶ pre/code 태그 안에 아래와 같은 html 태그나 부등호 같은 기호가 들어가면 잘못 인식하기 때문에 이를 escape해 줘야 한다.
<pre><code class="html"><h2 style="color: red;">I am Red</h2>
<h2 style="color: blue;">I am Blue</h2></code></pre>
Accessify라는 사이트에서 간편하게 바꿀 수 있으니 유용하게 활용할 수 있다. 사용할 코드를 위 서비스를 이용하여 escape한 뒤에 그것을 pre/code 태그 안에 넣어주면 작업은 손쉽게 끝난다.
<h2 style="color: red;">I am Red</h2>
<h2 style="color: blue;">I am Blue</h2>▶ highlight의 폰트나 크기는 Blogger "템플릿" -> "맞춤 설정" -> "고급" -> "CSS 추가"로 가서 아래의 내용을 수정해서 추가할 수 있다.
pre {
margin: 0px 0px;
font-size: 80%;
line-height: 1.3em;
}
감사합니다~~
답글삭제