티스토리에 코드 하이라이팅 사용하기

demun
퍼블리셔/도구
2010. 6. 5. 06:00

우선 설치하기전에 나에게 필요한 파일이 어떤 파일인지 먼저 생각해볼 필요가 있어 보입니다.

예를들어 나는 프로그래밍에 대한 글을 많이 포스팅하니까 모든 코드에 하이라이팅을 해야겠다??? 또는 저처럼 html,css,javascript 정도만 사용한다??? 이런식으로 한번 생각해볼 필요가 있습니다.

설치하기

왜냐면 필요도 없는 파일을 전부 업로드하고 링크해서 사용할필요는 없다는거죠. 속도만 느릴뿐.....
지원하는 파일과 코드를 한번 비교해보세요. brush 에 대한 자세한 내용은 여기에도 있습니다.

참고, Brush 목록

분류	사용가능 brush명	필요 파일
Bash/shell	bash, shell	shBrushBash.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
Groovy	groovy	shBrushGroovy.js
JavaScript	js, jscript, javascript	shBrushJScript.js
Java	java	shBrushJava.js
Perl	perl, pl	shBrushPerl.js
PHP	php	shBrushPhp.js
Plain Text	plain, text	shBrushPlain.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

자 생각하셨으면 출발합니다.

SyntaxHighlighter 홈페이지에서 현재 최신버젼인 2.1.364버젼을 다운로드 합니다. 다운로드

아니면 필요한 파일 즉 html, css, javascript 만 사용하실거면 아래파일을 다운로드 받으세요.

syntaxhighlighter_2.1.364.rar

압축을 풀고 스킨편집창에서 파일 업로드를 통해 모두 업로드합니다.

그리고 아래의 코드를 html 편집창에서 <head>와 </head> 사이에 삽입합니다.

<!-- SyntaxHighlighter 시작 -->
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shBrushCss.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.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/shThemeDjango.css">
<script type="text/javascript">
	SyntaxHighlighter.config.bloggerMode = true;
	SyntaxHighlighter.config.clipboardSwf = './images/clipboard.swf';
	SyntaxHighlighter.all();
</script>
<!--//SyntaxHighlighter 끝-->

여기서 한가지 팁....
위에서 ./images/shThemeDjango.css"> 부분에서 기본값인 shThemeDefault.css 로 사용하시면 흰바탕의 기본 디자인으로 사용가능합니다. 여러가지가 있으니 다양하게 적용해보시고 편한대로 사용하세요.
그리고 관련파일만 링크를 한겁니다. 파일을 모두 사용하거나 필요에 의해서 추가할경우
이제 설치와 링크하는것은 완료됐습니다. 간단하죠^^

사용하기

이전에는 blockquote 를 사용했던 모양입니다. 이전에는 사용을 안했으니 저도 잘 모르죠^^
이번 버젼부터는 pre 태그를 사용하면 되고 <script> 도 사용하면 된다고 합니다. 일단 저는 html, css 등 간단한것만 사용하기에 pre 태그만 사용해도 무방해 보입니다.

brush:사용하는언어 이런식으로 지정해주고 작성하면 됩니다.

여기에 코드

이런 식입니다.
마찬가지로 html 대신 css나 javascript를 넣어서 사용하시면 됩니다. 조금 다르니 유심이 보세요.

사용방법에 대한 자세한 글은 SyntaxHighlighter/Usage 에 있습니다. 참고하시면 됩니다.
한가지 더
티스토리 치환자를 넣을수 있습니다.

<pre class="brush: html; html-script: false">
<a href="[#\#_notice_rep_link_#\#]">[#\#_notice_rep_title_#\#]</a>
</pre>

html-script: false" 라는 부분이 추가됐습니다. 어때요? 치환자가 그대로 보이죠^^; 이런식으로 치환자의 #사이에 \를 넣으면 그대로 본문에 보여줍니다. 치환자 삽입에 어려움이 있던 분들한테는 희소식이 아닐까 생각합니다.

사용하기 팁.

제가 이글을 작성하는데만해도 여러번에 걸쳐 테스트해보고(사용을 안해봐서 모르기때문^^) 잘 보여지는지도 확인하며,,,,계속적으로 글뒤에 <br /> 태그가 붙는 현상이 있었습니다. ---- 티스토리.....

그래서 간단하게 작성하려면 에디터에서 관련글을 작성하고 한번에 붙여넣기를 통해서 작업하시는것이 SyntaxHighlighter 를 잘 사용하는 방법이라 하겠습니다.

또 한가지 제가 경험을 해보니 환경설정 - 기타설정에서 글쓰기 환경을 아래처럼 해보니 글쓰는데 도움이 됐습니다.

참고글
BLUEnLIVE님 블로그 => http://zoc.kr/751
SyntaxHighlighter 티스토리에 적용하기 =>http://gyuha.tistory.com/225
적절한 개행처리 팁 =>http://techbook.tistory.com/entry/tistory-highlight

개 개

demun(대문블로그)