읽을 만한 소스코드를 찾아 웹을 돌아다니다 보면 소스코드가 아주 예쁘게 보이는 페이지들이 있다. 거기에 행번호까지 나온다. "저건 도대체 어떻게 한걸까?" 라는 생각해 구글링을 했다. 그리고 SyntaxHighliter라는 기능이 있다는 것을 알았다. 바로 내 티스토리 블로그에 적용했고, 그 방법을 이야기하려고 한다.
2013년 11월 3일 현재, 최신버전은 3.0.83버전이다.
2. 다운로드 파일 압축풀기
다운로드 파일을 압축을 풀면 아래와 같이 5개의 폴더와 2개의 라이센스 파일, 그리고 1개의 html파일이 생성된다
3. Tistory Server에 Javascript와 CSS 업로드
사용할 파일은 styles폴더와 scripts파일에 모두 들어있다. 두 폴더에 들어있는 모든 파일을 Tistory서버에 업로드 한다.
4. skin.html 수정하기
이제 Tistory의 skin.html 파일을 수정할 차례다. 먼저 skin.html파일에서 CTRL+F로 '</head>'를 찾는다.
'</head>'바로 앞에 다음의 코드를 추가한다.
<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/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/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/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/shThemeDefault.css"> <script type="text/javascript"> SyntaxHighlighter.all(); </script>
다시 CTRL+F로 '<body>'를 찾는다. 이 <body>부분을 다음으로 대체한다.
<body Onload="dp.SyntaxHighlighter.HighlightAll('code');">
이제 Syntax Highlighting을 사용하기 위한 모든 준비는 끝났다.
5. Syntax Highlighting 적용하기
Syntax Highlighting기능을 적용해 보자. 이 기능은 Tistory글쓰기의 html모드에서 <pre> 또는 <textarea>태그를 사용하면된다.
<pre class="brush:python;" style="margin: 2px;">
import math
print(" X sinX cosX tanX")
print("=================================")
for i in range(0,91):
sinx = math.sin(math.pi * (i/180))
cosx = math.cos(math.pi * (i/180))
tanx = math.tan(math.pi * (i/180))
print("{0:3d} {1:0.4f} {2:0.4f} {3:0.4f}".format(i, sinx, cosx, tanx))
print("=================================")
</pre>
아래가 Syntax Highlighting이 적용된 모습이다.
import math
print(" X sinX cosX tanX")
print("=================================")
for i in range(0,91):
sinx = math.sin(math.pi * (i/180))
cosx = math.cos(math.pi * (i/180))
tanx = math.tan(math.pi * (i/180))
print("{0:3d} {1:0.4f} {2:0.4f} {3:0.4f}".format(i, sinx, cosx, tanx))
print("=================================")
