반응형
SyntaxHighlighter ? ( http://alexgorbatchev.com/SyntaxHighlighter/ )
blog에 개발 관련해서 내용을 적다보면 실제 코드를 보여주고 싶을 때가 있는데, 이 때 코드를 그냥 붙여 넣으면 일반 텍스트로 보이기 때문에 가독성이 떨어진다.
예를 들어, 아래 JavaScript 코드를 보면, 눈에 들어오지는 않는다.
이런 코드를 아래와 같이 실제 IDE ( Eclipse, Vim ... etc )에 보이는 것처럼 꾸며주는 것이 SyntaxHighlighter 이다.
이런 SyntaxHighlighting script 는 검색해보면 다양한 것들이 존재한다.
( ref: http://www.webdesignbooth.com/9-useful-javascript-syntax-highlighting-scripts/ )
그 중에서 가장 괜찮은 평을 가지고 있는 것이 SyntaxHighlighter 이다.
( 헷갈릴수도 있겠지만, SyntaxHighlighter 는 이런 syntax highlighting script 중 하나를 지칭하는 고유명사이다. )
Blog에 설치하기 ?
blog에 설치하는 것은 생각보다 간단하다.
위에서 말한 것처럼 SyntaxHighlighter는 JavaScript로 작성된 프로그램으로, JavaScript 파일을 link 해야하며,
그리고 추가로 코드의 모습을 이쁘게 해주기 위한 css 파일을 추가하면 된다.
실제 설치하는 것은 현재 사용하는 블로그가 티스토리이기 때문에, 티스토리를 예로 설명하겠다.
하지만 다른 블로그에도 쉽게 응용할 수 있다.
그리고 페이지에서 필요한 파일들을 다운로드하여 모든 파일을 블로그 스킨 폴더에 올릴 수도 있지만 SyntaxHighlighter에서 hosting을 제공하기 때문에 그렇게 할 필요는 없다.
설치나 자세한 사항에 대해서는 해당 페이지를 방문하면 더 자세하게 알 수 있다
( http://alexgorbatchev.com/SyntaxHighlighter/ )
Tistory 에 설치
1. 필요한 파일 link 하기
: 위에서 말한 것처럼 필요한 JavaScript, CSS 파일을 자기의 블로그에 link 시켜야 한다.
먼저 관리자 페이지에서 HTML/CSS 편집 으로 들어간다.
그리고 <head> ... </head> 사이에 아래의 내용을 복사해 넣는다.
여기서 Line 2 의 shThemeDefault.css 는 SyntaxHighlighter가 제공하는 다양한 theme들 ( http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/ )을 보고 취향에 맞는 css 파일을 선택해도 된다.
그럼 아래와 같이 추가되게 된다.
2. 필요한 Brush Load 설정하기
SyntaxHighlighter에서 각 언어에 맞는 색상을 주는 도구를 brush 라고 하는데, 설정을 로드해 주어야 한다.
위와 같이 HTML/CSS 편집에서 </body> tag를 찾아서 tag 아래에 밑의 JavaScript 코드를 복사해 넣으면 된다.
3. 실제 사용
위의 1, 2 과정을 마치면 실제로 사용이 가능하다.
사용법은 간단하다.
위와 같이 language code를 선택하여 class="brush:<language code>;" 에 넣어주면 된다.
language code는 위의 2번의 brush load 시에 결정되는데,
예를 들어 JavaScript language code 는, 위의 brush load 시에 아래와 같이 3가지의 code 를 설정하였기 때문에
js, jscript, javascript 중에서 아무거나 선택하면 된다.
위의 예에서는 javascript 로 작성하였으면 작성된 code는 아래와 같이 보이게 된다.
그 밖에 ...
위의 2. 필요한 Brush Load 설정하기 의 Line 2 는 SyntaxHighlighter의 설정으로 다양한 옵션이 있다.
toolbar 제거, line 시작 번호 설정 등...
해당 내용은 SyntaxHighlighter 를 참고하면 자세히 알 수 있다.
( http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/ )
blog에 개발 관련해서 내용을 적다보면 실제 코드를 보여주고 싶을 때가 있는데, 이 때 코드를 그냥 붙여 넣으면 일반 텍스트로 보이기 때문에 가독성이 떨어진다.
예를 들어, 아래 JavaScript 코드를 보면, 눈에 들어오지는 않는다.
function sayYeah() {
alert("Yeah~");
}
이런 코드를 아래와 같이 실제 IDE ( Eclipse, Vim ... etc )에 보이는 것처럼 꾸며주는 것이 SyntaxHighlighter 이다.
1
2
3
4
| function sayYeah() { alert("Yeah~");} |
이런 SyntaxHighlighting script 는 검색해보면 다양한 것들이 존재한다.
( ref: http://www.webdesignbooth.com/9-useful-javascript-syntax-highlighting-scripts/ )
그 중에서 가장 괜찮은 평을 가지고 있는 것이 SyntaxHighlighter 이다.
( 헷갈릴수도 있겠지만, SyntaxHighlighter 는 이런 syntax highlighting script 중 하나를 지칭하는 고유명사이다. )
Blog에 설치하기 ?
blog에 설치하는 것은 생각보다 간단하다.
위에서 말한 것처럼 SyntaxHighlighter는 JavaScript로 작성된 프로그램으로, JavaScript 파일을 link 해야하며,
그리고 추가로 코드의 모습을 이쁘게 해주기 위한 css 파일을 추가하면 된다.
실제 설치하는 것은 현재 사용하는 블로그가 티스토리이기 때문에, 티스토리를 예로 설명하겠다.
하지만 다른 블로그에도 쉽게 응용할 수 있다.
그리고 페이지에서 필요한 파일들을 다운로드하여 모든 파일을 블로그 스킨 폴더에 올릴 수도 있지만 SyntaxHighlighter에서 hosting을 제공하기 때문에 그렇게 할 필요는 없다.
설치나 자세한 사항에 대해서는 해당 페이지를 방문하면 더 자세하게 알 수 있다
( http://alexgorbatchev.com/SyntaxHighlighter/ )
Tistory 에 설치
1. 필요한 파일 link 하기
: 위에서 말한 것처럼 필요한 JavaScript, CSS 파일을 자기의 블로그에 link 시켜야 한다.
먼저 관리자 페이지에서 HTML/CSS 편집 으로 들어간다.
그리고 <head> ... </head> 사이에 아래의 내용을 복사해 넣는다.
1
2
3
4
| <link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"><link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css"><script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script><script src="http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js" type="text/javascript"></script> |
그럼 아래와 같이 추가되게 된다.
SyntaxHighlighter에서 각 언어에 맞는 색상을 주는 도구를 brush 라고 하는데, 설정을 로드해 주어야 한다.
위와 같이 HTML/CSS 편집에서 </body> tag를 찾아서 tag 아래에 밑의 JavaScript 코드를 복사해 넣으면 된다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| <script type="text/javascript">SyntaxHighlighter.defaults["toolbar"] = false;SyntaxHighlighter.autoloader( 'xml xhtml xslt html http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js');SyntaxHighlighter.all();</script> |
3. 실제 사용
위의 1, 2 과정을 마치면 실제로 사용이 가능하다.
사용법은 간단하다.
<pre class="brush: javascript;">
alert("Hello SyntaxHighlighter~");
</pre>
위와 같이 language code를 선택하여 class="brush:<language code>;" 에 넣어주면 된다.
language code는 위의 2번의 brush load 시에 결정되는데,
예를 들어 JavaScript language code 는, 위의 brush load 시에 아래와 같이 3가지의 code 를 설정하였기 때문에
1
2
3
|
js, jscript, javascript 중에서 아무거나 선택하면 된다.
위의 예에서는 javascript 로 작성하였으면 작성된 code는 아래와 같이 보이게 된다.
1
| alert("Hello SyntaxHighlighter~"); |
그 밖에 ...
위의 2. 필요한 Brush Load 설정하기 의 Line 2 는 SyntaxHighlighter의 설정으로 다양한 옵션이 있다.
toolbar 제거, line 시작 번호 설정 등...
해당 내용은 SyntaxHighlighter 를 참고하면 자세히 알 수 있다.
( http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/ )
728x90
반응형
댓글