본문 바로가기
TIP

티스토리에 Syntax Highlighter 적용

Gyrfalcon 2014. 2. 28. 09:16


 1. Syntax Highlighter Download


http://alexgorbatchev.com/SyntaxHighlighter/download


다운로드는 의외로 간단하다. Syntax Highlighter 공식 홈페이지에서 다운로드 받을 수 있다. 위 링크를 클릭하면 큼지막 하게 Click Here to Download. 라고 씌여있다.

이 제작자분께서 강력하게 Donate를 원하는 것 같으니 죽어가는 개발자를 위해 Paypal로 돈을 보내줄수도 있겠다.


 

  2. 파일 업로드


압축 폴더를 풀면 다음과 같은 폴더들이 나온다. 



이 중 우리가 업로드 할건 scripts 폴더와 styles 폴더이다. 내용은 아래 그림과 같다. 

필요한 것만 올려도 상관 없으나 용량이 부족하지 않은이상 큰 문제가 없으니 모두 업로드하자.



Tistory 관리 >> HTML/CSS 편집 >> 파일 업로드 >> 추가 버튼을 차례로 눌러서 모두 업로드



  그럼 업로드가 완료된다.



 3. HTML 수정하기


 여러분이 제일 귀찮아하는 나도 귀찮은 HTML 손보기는 의외로 간단하다

 Tistory 관리 >> HTML/CSS 편집에 다시 들어가 CTRL + F 로 </head>를 찾는다.

 찾고나서 </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>


 아직 끝난게 아니다. 범용성을 늘리기 위해 우리는 textarea 태그를 이용할 것이므로 추가 수정이 필요하다.

 다시 CTRL + F로 <body>를 찾아주자. 

 찾았다면 <body>를 다음과 같이 덮어씌운다(바꾼다).


<body Onload="dp.SyntaxHighlighter.HighlightAll('code');">

 

그렇다면 HTML 수정이 완료된다. 이제 사용법만 알면 된다. 참 쉽죠?



 4. Syntax Highlighter 적용법


 원래 Syntax Highlighter 적용법에는 크게 두가지가 있다. <pre> 태그 이용법과 <textarea> 태그 이용법, 하지만 <pre>태그를 이용하게 되면 html태그 코드를 사용할 때 많이 많이 불편하게 되므로 <textarea>태그를 이용하자.


 간단하다. 글 작성할 때 코드를 쓰게된다면 먼저, HTML에티터 타입으로 변경한다.


그리고 나서 다음과 같이 입력해준다.

 

?
1
2
3
<textarea name="code" class="brush:원하는 언어;">
에디터 모드에서 이 사이에 코드를 작성하면 된다.
</textarea>



 5. 예시 및 다양한 변형


 만약 c++ 코드를 입력하고 싶다면? 다음과 같이 입력하면 된다. col이나 width는 중요하지 않다.


?
1
2
3
4
5
6
7
8
9
<textarea name="code" class="brush:cpp;">
#include <iostream>
using namespace std;
 
void main(){
  cout << "참 쉽죠?";
}
 
</textarea>


 사용할 언어 목록은 다음과 같다.


Brush name

Brush aliases

File name

ActionScript3

as3, actionscript3

shBrushAS3.js

Bash/shell

bash, shell

shBrushBash.js

ColdFusion

cf, coldfusion

shBrushColdFusion.js

C#

c-sharp, csharp

shBrushCSharp.js

C++

cpp, c

shBrushCpp.js

CSS

css

shBrushCss.js

Delphi

delphi, pas, pascal

shBrushDelphi.js

Diff

diff, patch

shBrushDiff.js

Erlang

erl, erlang

shBrushErlang.js

Groovy

groovy

shBrushGroovy.js

JavaScript

js, jscript, javascript

shBrushJScript.js

Java

java

shBrushJava.js

JavaFX

jfx, javafx

shBrushJavaFX.js

Perl

perl, pl

shBrushPerl.js

PHP

php

shBrushPhp.js

Plain Text

plain, text

shBrushPlain.js

PowerShell

ps, powershell

shBrushPowerShell.js

Python

py, python

shBrushPython.js

Ruby

rails, ror, ruby

shBrushRuby.js

Scala

scala

shBrushScala.js

SQL

sql

shBrushSql.js

Visual Basic

vb, vbnet

shBrushVb.js

XML

xml, xhtml, xslt, html, xhtml

shBrushXml.js


 나머지 자세한 사항은 홈페이지에 가면 나와있다.


'TIP' 카테고리의 다른 글

Filezilla에서 iSeries 접속하기  (0) 2014.04.09
Zookeeper 설치  (0) 2014.04.08
RGB 색상 코드  (0) 2014.02.22
국내 ZIP CODE  (0) 2014.02.22
드롭박스(DropBox) 용량 늘리기. 친구 초대  (0) 2014.02.22

'TIP' Related Articles

티스토리툴바