[티스토리] 깔끔한 코드 적용을 위한 SyntaxHighlighter 적용

티스토리에 글을 작성할 때 소스 코드를 추가하는 경우가 있습니다.

블로그에 다양한 코드나 쉘 명령어를 추가하는 경우 코드 부분을 강조할 수 있습니다.

각 언어에 맞는 하이라이팅 기능을 통해 좀 더 직관적인 코드 설명이 가능합니다.

SyntaxHighlighter는 이런 기능을 제공해줍니다.

1. SyntaxHighlighter 준비

아래 링크에서 먼저 SyntaxHighlighter를 다운로드 받습니다.

http://alexgorbatchev.com/SyntaxHighlighter/download/

다운로드 받은 압축 파일은 먼저 압축을 해제합니다.

2. SyntaxHighlighter 적용하기

티스토리 관리자 페이지에서 HTML/CSS 편집을 선택합니다.

우측의 파일업로드를 누르면 기본적으로 존재하는 파일들을 확인할 수 있습니다.

파일 목록 하단의 추가 버튼을 누릅니다.

먼저 압축을 해제한 폴더의 Script 폴더 안의 모든 스크립트 파일을 추가합니다.

파일은 한 번에 업로드가 가능합니다.

다음으로 styles 폴더의 모든 css 파일을 업로드합니다.

파일을 전부 업로드하면 우측 상단의 HTML을 선택합니다.

그리고 </head> 부분을 찾아서 바로 위에 다음과 같은 내용을 추가합니다.

<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shLegacy.js"></script>
<script type="text/javascript" src="./images/shBrushBash.js"></script>
<script type="text/javascript" src="./images/shBrushCpp.js"></script>
<script type="text/javascript" src="./images/shBrushCSharp.js"></script>
<script type="text/javascript" src="./images/shBrushCss.js"></script>
<script type="text/javascript" src="./images/shBrushDelphi.js"></script>
<script type="text/javascript" src="./images/shBrushDiff.js"></script>
<script type="text/javascript" src="./images/shBrushErlang.js"></script>
<script type="text/javascript" src="./images/shBrushGroovy.js"></script>
<script type="text/javascript" src="./images/shBrushJava.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushPerl.js"></script>
<script type="text/javascript" src="./images/shBrushPhp.js"></script>
<script type="text/javascript" src="./images/shBrushPlain.js"></script>
<script type="text/javascript" src="./images/shBrushPython.js"></script>
<script type="text/javascript" src="./images/shBrushPowerShell.js"></script>
<script type="text/javascript" src="./images/shBrushRuby.js"></script>
<script type="text/javascript" src="./images/shBrushScala.js"></script>
<script type="text/javascript" src="./images/shBrushSql.js"></script>
<script type="text/javascript" src="./images/shBrushVb.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="./images/shCore.css">
<link type="text/css" rel="stylesheet" href="./images/shThemeEmacs.css">

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

파일 중에 shThemeDefault.css 파일은 다른 Theme을 적용할 수도 있습니다.

원하는 Theme을 style 폴더에 있는 shTheme*.css 중에서 선택해서 입력하면 됩니다.

스크립트를 입력하고 저장을 누르면 모든 설정은 완료됩니다.

3. 코드에 하이라이트 적용

블로그 포스팅에 코드를 추가할 때는 다음과 같이 추가하면 됩니다.

<pre class="brush:cpp">
std::vector<int> myList = {1, 2, 3, 4, 5};
</pre>

<pre> 태그로 감싸고 그 사이에 코드를 입력하면 됩니다.

brush 뒤에 입력할 수 있는 언어나 환경은 다음과 같습니다.

Brush name	Brush aliases
ActionScript3	as3, actionscript3
Bash/shell	bash, shell
ColdFusion	cf, coldfusion
C#	c-sharp, csharp
C++	cpp, c
CSS	css
Delphi	delphi, pas, pascal
Diff	diff, patch
Erlang	erl, erlang
Groovy	groovy
JavaScript	js, jscript, javascript
Java	java
JavaFX	jfx, javafx
Perl	perl, pl
PHP	php
Plain Text	plain, text
PowerShell	ps, powershell
Python	py, python
Ruby	rails, ror, ruby
Scala	scala
SQL	sql
Visual Basic	vb, vbnet
XML	xml, xhtml, xslt, html, xhtml

추가하는 코드의 언어에 맞춰서 aliases 부분의 이름 중 하나를 입력하면 됩니다.

주의할 점은 코드에 <나 > 등 태그로 인식되는 특수문자가 포함되면 안된다는 것입니다.

해당 내용은 &lt ;(공백제외)나 &gt ;(공백제외)로 변경해서 입력하면 정상적으로 입력됩니다.

4. 수직 스크롤바 제거 및 물음표 제거

코드가 표시될 때 불필요한 수직 스크롤바가 표시되면 아래 코드를 추가해서 없앨 수 있습니다.

코드는 </head> 위에 추가한 <script></script> 다음에 추가하면 됩니다.

<style type="text/css">
    .syntaxhighlighter {
        overflow-y: hidden !important;
        overflow-x: auto !important;
    }
</style>

이제 불필요한 수직 스크롤바가 사라집니다.

물음표까지 제거된 최종 적용 코드는 아래 링크의 가장 하단에서 확인이 가능합니다.

2017/01/01 - [IT/컴퓨터/Blog Tip] - [티스토리] SyntaxHighlighter의 물음표(Question Mark) 제거

이것으로 SyntaxHighlighter가 적용이 완료됩니다.