Developer Duveen.

티스토리에 코드 삽입하기 본문

낙서장

티스토리에 코드 삽입하기

Duveen 듀빈 2015. 9. 10. 00:51

앞으로 블로그 활동을 하게 되면, 블로그에 코드를 입력 할 일이 많을 것 같아서. 코드 이쁘게 넣을 수 있는 방법을 찾아 보았는데..

Syntax Highlighter 라는 소스를 발견 하였다. 나의 블로그에 적용한 방법을 올려볼까 한다.


1. Download

Syntax Higilighter 홈페이지 (http://alexgorbatchev.com/SyntaxHighlighter/download/)에 접속을 하여서 최신버전인 3.0.83 (15.09.10 기준) 을 다운받을 수 있다.


2. Syntax Highlighter 설치

ZIP 파일을 받은 후 압축파일을 열어보면 여러가지 파일이 나오는데 그 중, scripts와 styles 폴더만 압축을 해제해 줍니다.



압축 해제 후 관리자 페이지에 접속을 하고, [ 꾸미기 -> HTML/CSS 편집 ] 항목으로 들어갑니다.


그 후, 파일 업로드에 들어가고, 압축해제 한 파일들을 추가 합니다.


파일 추가를 다 했으면 CSS HTML 편집부분에 </head>부분을 찾은 후 바로 윗 부분에 아래와 같이 코드를 작성해 줍니다.

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


그리고 <body> 태그를 찾은 후 <body 와 > 사이에 아래 line을 작성해줍니다.

1
Onload="dp.SyntaxHighlighter.HighlightAll('code');"
cs

그리고 저장을 하면 홈페이지에서 불러들일 준비가 되었습니다.


3. 사용방법

사용방법은 정말 간단합니다.

HTML 에디터로 변경 후 작성하고 싶은 부분에 아래 코드를 입력하면 됩니다.

1
2
3
<textarea name = "code" class = "brush:사용하고싶은 언어;">
내용 입력
</textarea>
cs



4. 코드별 Loader

코드별 Loader는 다음과 같습니다.

'applescript            @shBrushAppleScript.js',
'actionscript3 as3      @shBrushAS3.js',
'bash shell             @shBrushBash.js',
'coldfusion cf          @shBrushColdFusion.js',
'cpp c                  @shBrushCpp.js',
'c# c-sharp csharp      @shBrushCSharp.js',
'css                    @shBrushCss.js',
'delphi pascal          @shBrushDelphi.js',
'diff patch pas         @shBrushDiff.js',
'erl erlang             @shBrushErlang.js',
'groovy                 @shBrushGroovy.js',
'java                   @shBrushJava.js',
'jfx javafx             @shBrushJavaFX.js',
'js jscript javascript  @shBrushJScript.js',
'perl pl                @shBrushPerl.js',
'php                    @shBrushPhp.js',
'text plain             @shBrushPlain.js',
'py python              @shBrushPython.js',
'ruby rails ror rb      @shBrushRuby.js',
'sass scss              @shBrushSass.js',
'scala                  @shBrushScala.js',
'sql                    @shBrushSql.js',
'vb vbnet               @shBrushVb.js',
'xml xhtml xslt html    @shBrushXml.js'


0 Comments
댓글쓰기 폼