컴퓨터 어플&팁

티스토리에서 syntax highlight를 사용해 보자.

콘파냐 2017. 3. 20. 06:30
반응형
지금까지 블로그를 하면서 syntax highlight를 사용해 본 적은 없었다. 귀찮기도 하고 코드보다는 글의 양이 많아서일까.. 그때 그때 캡쳐하는 것이 편하기도 하고 글과 이미지가 같이 섞여 있으니 뭔가 더 검색에 잘 노출될 것 같기도 하고 말이다. 그래도 웬지 좀 더 전문적으로 보이고 싶다면 syntax highlighter를 설치해서 사용하는 것도 괜찮을 거란 느낌이 든다.

우선 구글에서 syntax highlighter를 검색하면 무지 많은 종류가 있다. 개인적 취향은 워낙 다양하기 일일히 비교해 가면서 써야하겠다. 

위 사이트에 들어가보면 오른 편에 donwload하는 링크가 있다. 다운로드를 받으려면 오늘 기준으로 그걸 누르지 말고 본문 시작부분에 3.0.83 Click here to download를 누르면 된다. 다운로드를 받는다면 직접 자신의 티스토리에 업로드를 해야한다. 티스토리에 업로드를 하면 모두 images폴더로 들어간다. 매번 블로그에 코드를 쓰는 건 아니기 때문에 스킨파일들과 짬뽕이 되는게 여간 불편한게 아니다. 


그래서 여기서는 다운로드 하지 않고 외부 링크를 걸어서 하는 방법을 사용한다. 해당 사이트의 오른쪽에 hosting을 클릭하면 그 방법이 나와 있다.


사실 다운로드를 하든 외부 링크를 걸어서 사용하든 달라지는 건 없다. 단지 소스 하이라이팅을 사용하기 위해서 필요한 파일의 주소만 달라지는 것이다. 그리고 우리는 다음과 같은 스크립트를 미리 로드시킬 필요가 있다. 다음 설명대로 해보자.
티스토리 관리자 페이지로 가서 HTML/CSS 편집을 선택한다. 다음 내용을 HEAD태그 사이에 넣어주면 끝이다.

<HEAD>
...
...
<!-- syntax highlighter -->
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js"></script>

<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css">
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css">

<script type="text/javascript">
     SyntaxHighlighter.all()
</script>

<HEAD>

부연 설명하자면 <script로 시작하는 부분은 언어 설정을 위한 스크립트, <link로 시작하는 부분은 테마에 관련된 부분이다. 기본 코어 파일 하나와 언어파일(Brush), 테마파일(Theme)이 있다. 위 코드는 C++과 python만 적용한 코드다. 만약 언어를 추가하고 싶다면 해당 언어에 해당하는 링크를 똑같이 추가해주면 된다. 위에서는 디폴트 테마를 사용했는데 다른 테마를 사용하고 싶다면 다른 테마를 추가해주면 되겠다. 추가적인 테마와 언어는 위 사이트에서 syntaxes와 themes 메뉴에 가면 쉽게 알 수 있을 것이다. 그럼 이제 코드를 저장하고 실제로 사용을 해보자.

두가지 방법이 있는데 첫 번째 방법은 다음과 같다. 티스토리 글 편집 상태에서 html에 체크를 해서 다음과 같이 소스 코드를 넣어주면 된다.

<pre class="brush: cpp">
#include &lt;iostream>
using namespace std;

int main()
{
    cout &lt;&lt; "Hello world!" &lt;&lt; endl;
    return 0;
}
</pre>

<pre class="brush: 사용할 언어">

코드의 언어는 위와 같이 설정하면 된다. cpp, js, python 등이 있는데 언어 이름은 위 사이트 오른쪽 메뉴 syntaxes에 정리되어 있다. (물론 해당 언어의 syntax를 적용하려면 앞서 한 것 처럼 해당 언어의 스크립트 파일을 로드해 놓아야 한다.)
그런데 이 소스 코드를 잘 보면 <를 모두 &lt;로 대신 써놓았다 html 상에서 <는 모두 태그 시작을 의미하기 때문에 문자 자체로 사용하려면 이스케이프 문자로 대체해야 하기 때문이다. 매번 이런 불편을 감수할 필요는 없다.

따라서 다음과 같은 사용법을 권장한다.

<script type="syntaxhighlighter" class="brush: cpp"><![CDATA[
#include <iostream>
using namespace std;

int main()
{
    cout << "Hello world!" << endl;
    return 0;
]]></script>

진한 부분은 그대로 두고 CDATA 태그 안에 소스코드를 넣어주면 된다. 

만약 파이썬 코드를 넣고 싶다면 cpp 대신 python을 넣어주면 된다. 위 방법에서 주의할 점은 스크립트이므로 코드가 편집상태에서는 보이지 않는 다는 점이다.

이번에는 사용 팁이다. 사실 헤더에 스크립트를 넣어두면 syntax highlight가 필요하지 않은 블로그 글이라도 매번 스크립트를 로드를 하므로 페이지가 느려질 수가 있다. 이런 경우는 앞서 <HEAD> 와 </HEAD> 사이에 넣어 놓은 코드를 티스토리의 서식으로 만들어 두고 사용하면 매우 편리하다. 서식을 만드는 방법은 매우 간단하다.
글쓰기를 누르면 바로 다음과 같은 라디오 버튼이 존재한다.

서식을 선택하고 서식 제목을 입력한 뒤 내용을 입력하면 된다. html코드 역시 입력할 수 있다. 여기에 앞서 <HEAD> 와 </HEAD> 사이에 넣은 코드들을 넣어서 서식으로 만들어 두고 추후에 소스 하이라이트가 필요한 글을 작성할 때마다 본문의 젤 첨에 서식을 사용해서 위 코드를 불러오면 되는 것이다. 서식을 사용하는 방법은 편집 상태에서 오른쪽 사이드 바 아래쪽에 보면 서식이라는 드롭다운 메뉴가 있다. 눌러보면 자신이 저장해 놓은 서식이 있고 클릭하면 서식이 현재 커서 위치에 복사된다.

(서식으로 사용하려면 <HEAD> 와 </HEAD> 사이에 넣어둔 코드는 잊지말고 삭제하자.)

이 밖에도 하이라이트 된 코드로 직접 변환해 주는 사이트를 이용하여 html코드를 직접 입력해도 된다. 
이런 사이트는 위 사이트가 꽤 괜찮아 보인다.
반응형