안녕하세요~작은나무입니다!!
이번 포스팅은 티스토리 블로그에 소스코드를 등록하는 방법에 대해 알아보도록 하겠습니다.
IT와 관련된 블로그를 운영하면서 소스와 관련된 글을 작성할때 소스코드의 가독성이 너무 안좋은 것 같아 고민이 있었는대요 드디어 소스코드를 이쁘게 올릴 수 있는 방법을 찾았습니다.
가장 많이 사용하는 방법은 SyntaxHighlighter와 ColorScripter를 이용하는 방법이 있습니다.
먼저 SyntaxHighlighter를 설정하고 사용하는 방법에 대해 알아보겠습니다.
SyntaxHighlighter 설정 및 사용방법
SyntaxHighlighter는 오픈소스 라이센스로 무료 사용이 가능합니다. 사용하기 위해 약간의 설정이 필요합니다.
http://alexgorbatchev.com/SyntaxHighlighter/에 접속하신 후 소스파일을 다운로드 받습니다.
GitHub에 올라온 버전을 Download ZIP파일로 내려받습니다. 현재 최신버전은 4.0.1이 올라와 있습니다. (약간 오류가 있다고 하네요!)
저는 syntaxhighlighter_3.0.83을 다운받아 설치하도록 하겠습니다. 설치파일은 아래 올려뒀습니다.
내려받은 파일의 압축을 해제합니다. 압축을 해제하면 폴더가 5개 나오는대요 여기서 scripts와 styles의 두개의 폴더만 사용을 합니다.
티스토리 관리자 > 스킨 편집 > html 편집 > 파일업로드를 클릭하신 후 +추가 버튼을 클릭하여 압축 해제한 폴더 (scripts, styles) 파일을 업로드 합니다. 모두 업로드해도 되지만 저는 아래 언어중 제가 사용하는 언어만 등록하려 합니다.
<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/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>
업로드 완료 후 위의 코드를 복사해서 HTML코드의 <head>...</head>사이에 붙여 넣습니다.
shCore.js와 shLegacy.js는 필수로 등록이 되어야 합니다. 테마 변경은 shThemeDefault.css의 파일명을 변경해 주시면 됩니다.
Syntaxhighlighter 지원 언어이며 소스코드를 입력하는 방법은 <pre class="brush:java;">코드</pre>에서 java부분을 위의 aliases이름으로 변경해 주시면 각 언어별로 사용이 가능합니다.
이렇게 설정하니 소스코드의 가독성도 좋아지고 복사가 가능하게 되었습니다.
소스코드를 붙이는 방법중에 ColorScripter를 사용해서 작성을 할 수도 있습니다.
이 방법은 위와 같이 별도의 설정이 필요없이 사용할 수 있는 장점이 있는대요~ 다양한 언어를 지원합니다.
사용방법은 https://colorscripter.com에 접속하신 후 언어를 선택하신 후 코드를 작성합니다. 작성 완료 후 클립보드로 복사를 클릭하신 후 붙여 넣기만 하면 됩니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<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/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>
|
cs |
※ 별도 설정없이 이용이 가능하나 소스코드가 지저분해지고, 나중에 수정하기 힘든 단점이 있습니다.
