소스코드를 그냥 copy & paste를 해버리면 소스 자체를 읽기가 힘들다.
그래서 오픈소스로 SyntaxHighlighter 라는 라이브러리(?)가 있다.
이것을 설치해주면 티스토리에서도 소스코드 하이라이터를 사용할 수 있다.
먼저 다운로드를 한다. (다운로드)
먼저 admin에서 좌측 꾸미기에서 스킨을 클릭후 아래 화면과 같이 파일 업로드를 클릭한다.
이어 나오는 화면에서 하단에 있는 "추가" 버튼을 누른 뒤 아까 받아둔 SyntaxHighlighter 폴더의 styles와 scripts에 있는 파일들을 업로드 시킨다.
상단에 있는 HTML/CSS 버튼을 누른 후
skin.html에 있는 head 부분에 아래 내용을 집어 넣는다.
<p><script src="./images/shCore.js" type="text/javascript"></script></p>
<p><script src="./images/shBrushBash.js" type="text/javascript"></script></p>
<p><script src="./images/shBrushCpp.js" type="text/javascript"></script></p>
<p><script src="./images/shBrushCSharp.js" type="text/javascript"></script></p>
<p><script src="./images/shBrushCss.js" type="text/javascript"></script></p>
<p><script src="./images/shBrushDelphi.js" type="text/javascript"></script></p>
<p><script src="./images/shBrushDiff.js" type="text/javascript"></script></p>
<p><script src="./images/shBrushGroovy.js" type="text/javascript"></script></p>
<p><script src="./images/shBrushJava.js" type="text/javascript"></script></p>
<p><script src="./images/shBrushJScript.js" type="text/javascript"></script></p>
<p><script src="./images/shBrushPhp.js" type="text/javascript"></script></p>
<p><script src="./images/shBrushPlain.js" type="text/javascript"></script></p>
<p><script src="./images/shBrushPython.js" type="text/javascript"></script></p>
<p><script src="./images/shBrushRuby.js" type="text/javascript"></script></p>
<p><script src="./images/shBrushScala.js" type="text/javascript"></script></p>
<p><script src="./images/shBrushSql.js" type="text/javascript"></script></p>
<p><script src="./images/shBrushVb.js" type="text/javascript"></script></p>
<p><script src="./images/shBrushXml.js" type="text/javascript"></script></p>
<p> <link href="./images/shCore.css" type="text/css" rel="stylesheet"><link href="./images/shThemeDefault.css" type="text/css" rel="stylesheet"></p>
<p><script type="text/javascript"> SyntaxHighlighter.config.clipboardSwf = './images/clipboard.swf'; SyntaxHighlighter.all();</script></p>
<p></p>
최종으로 "저장" 버튼을 누른다.
이제 소스코드 하이라이터를 사용할 준비는 끝났다.
글쓰기 페이지에서 글을 잘 쓴 다음에 소스 코드는 가장 나중에 입력하는 편이 좋다.
왜냐하면 HTML 문법을 잘 모르는 사용자들에게 문단이니 뭐니 직접 다 처넣어야 하기 때문에....
그래서 소스가 들어갈 부분을 잘 확인한 다음에
글을 쓸 때 우측 상단에 있는 HTML을 누른다.
그 다음에
<pre class="brush:java">
소스 코드 내용
</pre>
와 같이 사용한다.
실제 사용하게 되면 아래와 같이 화면에 출력된다.
package kr.peopleware.util.test; import java.util.List; import kr.peopleware.util.common.file.FileUtil; public class FileUtilTester { /** * @param args */ public static void main(String[] args) { // TODO Auto-generated method stub List<String> lines = FileUtil.load2List("www.com.001", "EUC-KR"); for (String line : lines) { System.out.println(line); } } }
여기서 주의 사항이 하나 있다.
"<"를 사용할 때는 "<"로 대체해야한다.
List<String>의 경우에는 List<String>으로 대체하여야 한다. 여간 불편한게 아니지만..그래도 이렇게 해줘야 된다..아직까지는..ㅠㅠ
실제로 이 라이브러리를 제작자도 큰 이슈로 다루고 있다..조만간 해결책이 나오겠지..
'Legacy > Blog' 카테고리의 다른 글
티스토리 카테고리 펼치기 (0) | 2012.10.27 |
---|