티스토리 글에서 코드 강조하기 - 코드 하이라이터(Syntax Highligter) 사용

안녕하세요! 꼬부기입니다.

티스토리 블로그에 포스팅을 한 개, 두 개 올리다 보면 코드를 써야하는 경우가 있습니다.

개발관련 블로그를 운영하는 경우 코드를 한 눈에 들어오게끔 포스팅할 수 있다면 읽는 사람 입장에서 좀 더 편하게 글을 읽을 수 있게됩니다.

포스팅을 하는 입장에서는 조금 번거로울 수 있으나, 블로그에 방문한 사람들의 편의를 위해 조금만 불편을 감수하면 다음과 같이 깔끔한 코드를 블로그에 올릴 수 있게 됩니다.

1. 적용하기 전

---

#include<stdio.h>

int main(void)

{

printf("Hello, Tistory!\n");

return 0;

}

2. 적용 후

---

---

보시는 바와 같이 소스코드를 그냥 붙여 넣는 것보다 훨씬 깔끔하고 보기에도 편합니다.

이렇게 할 수 있도록 도와주는 도구는 SyntaxHighlighter라는 오픈 소스입니다. 우리나라에서는 흔히 '코드 하이라이터'라고 부르는데, 이것을 티스토리에 적용하면 블로거들의 입맛대로 소스코드 출력모습을 설정할 수 있습니다.

1. SyntaxHighlighter 파일을 다운받는다.

---

highlight.zip

많은 블로그에서 SyntaxHighlighter에 관한 글을 올렸습니다. 이와 관련된 글들을 보고 제 블로그에 적용시키기 위해 많이 시도해보던 중, SyntaxHighlighter V3을 이용해서 코드를 입력한 것이 처음으로 제대로 작동했습니다. 물론 개발자 홈페이지에서 다운받을 수 있는 4버전도 있지만, 기존 버전을 가지고도 충분히 깔끔하게 적용시킬 수 있습니다. 그래서 이 포스팅은 SyntaxHighlighter V3을 기준으로 작성하려고 합니다.

(절대 4버전을 실패해서가 아닙니다.... 사실 맞습니다..)

2. 다운받은 파일을 업로드한다.

---

1. 다운로드 받은 파일을 압축을 해제한다.
   
   
2. 티스토리 블로그 관리 화면에서 목록 중에 [꾸미기] - [스킨 편집] 목록을 클릭합니다.
   
   
3. 스킨 편집 화면에서 우측에 [html 편집] 버튼을 클릭합니다.
   
   
4. 들어가면 HTML코드 창이 켜져있습니다. 그 상태에서 상단에 [파일업로드] 버튼을 클릭합니다.
   
   
5. 아래쪽에 보면 [+추가]을 클릭합니다.
   파일 선택창이 뜨면 압축을 풀어서 얻은 폴더를 찾아 들어갑니다. 그 폴더에서 highlight.pack.js 파일, 그리고 styles 폴더에서 자신이 원하는 스타일을 선택해서 업로드하면 플러그인 업로드가 완료됩니다. 원래는 필요한 파일만 찾아서 업로드해도 괜찮습니다만, 파일 크기가 크지 않고 초보자인 우리에게는 헷갈릴 염려가 있으니 그냥 통째로 업로드 하겠습니다.
   
   

3. 블로그에 코드 하이라이터 적용시키기 (플러그인 적용하기)

---

파일 업로드를 모두 다 하셨으면, HTML/CSS/파일업로드 중에서 HTML 목록을 클릭합니다.

그러면 우측에 HTML 코드가 쫘르륵 나오게 될텐데, 거기에 다음 소스코드를 추가해줍니다.
(다른 소스를 건드리게 될 경우 블로그 작동이 이상하게 될 수도 있으니 주의바랍니다.)
아래의 소스 코드를 추가할 때는 헷갈리지 않게 </head>바로 위에 넣으시면 좋습니다.

</head>의 위치는 Ctrl + F로 쉽게 찾을 수 있습니다.

<link rel="stylesheet" href="./images/vs2015.css">

<script src="./images/highlight.pack.js"></script>

<script>hljs.initHighlightingOnLoad();</script>

제가 적용하고자 하는 스타일은 vs2015.css라는 파일입니다.

소스코드까지 모두 넣으셨다면 저장 버튼을 누르면 완료됩니다.

4. 플러그인 사용해보기

---

포스팅을 할 때 코드 하이라이터를 적용시키기 위해서는 HTML모드로 바꾼뒤에, 원하는 위치에 다음과 같은 소스를 작성해야합니다.

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

여기서 주의해야 할 점은 다음과 같습니다.

첫번째는

<pre><code class="cpp">

소스코드

</code></pre>

이렇게 작성할 경우 코드가 개행(엔터 한번 입력한 것과 동일)이 됩니다. 따라서 <code ~~>바로 뒤에 소스코드를 붙여야 합니다.

두번째는 #include<stdio.h>와 같이 헤더파일을 선언하고 싶은데, HTML에서 <>는 &lt; &gt;로 입력해야 실제로 포스팅을 했을 때 소스코드 상에 나타납니다. HTML코드를 입력할 때 올리고자 하는 소스에서 <>기호를 &lt,&gt로 변경하시면 됩니다.

세번째는 brush옆에 적용할 언어를 올바르게 입력해야 한다는 것입니다. 언어별 입력 단어는 다음과 같습니다.

Brush name	Brush aliases	File name
ActionScript3	as3, actionscript3	shBrushAS3.js
Bash/shell	bash, shell	shBrushBash.js
ColdFusion	cf, coldfusion	shBrushColdFusion.js
C#	c-sharp, csharp	shBrushCSharp.js
C++	cpp, c	shBrushCpp.js
CSS	css	shBrushCss.js
Delphi	delphi, pas, pascal	shBrushDelphi.js
Diff	diff, patch	shBrushDiff.js
Erlang	erl, erlang	shBrushErlang.js
Groovy	groovy	shBrushGroovy.js
JavaScript	js, jscript, javascript	shBrushJScript.js
Java	java	shBrushJava.js
JavaFX	jfx, javafx	shBrushJavaFX.js
Perl	perl, pl	shBrushPerl.js
PHP	php	shBrushPhp.js
Plain Text	plain, text	shBrushPlain.js
PowerShell	ps, powershell	shBrushPowerShell.js
Python	py, python	shBrushPython.js
Ruby	rails, ror, ruby	shBrushRuby.js
Scala	scala	shBrushScala.js
SQL	sql	shBrushSql.js
Visual Basic	vb, vbnet	shBrushVb.js
XML	xml, xhtml, xslt, html, xhtml	shBrushXml.js

코드 하이라이터 적용 예시

글이 도움이 되셨다면 공감버튼 꾹!

로그인 하지 않아도 누르실 수 있습니다.