소스코드를 그냥 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);
		}
	}

}


여기서 주의 사항이 하나 있다.


"<"를 사용할 때는 "&lt;"로 대체해야한다.


List<String>의 경우에는 List&lt;String>으로 대체하여야 한다. 여간 불편한게 아니지만..그래도 이렇게 해줘야 된다..아직까지는..ㅠㅠ


실제로 이 라이브러리를 제작자도 큰 이슈로 다루고 있다..조만간 해결책이 나오겠지..





'Tip > Blog' 카테고리의 다른 글

티스토리에 소스코드 집어넣기  (0) 2012.11.06
티스토리 카테고리 펼치기  (0) 2012.10.27

티스토리는 카테고리 펼치기 옵션이 제공되지 않아서


특정 블로거의 카테고리를 한눈에 보는것이 쉽지 않다.


이를 해결하기 위해서는 skin.html을 손봐줘야한다.


관리자에서 


꾸미기 -> HTML/CSS 편집 클릭


skin.html 내용이 오른쪽에 출력되는것을 볼수 있다.


그 후에 찾기(Ctrl+F, Command+F)로 "##_category_##"를 검색한다.


찾은 위치로 이동 후 


<div>["##_category_##"]</div> 뒤에 


<script language="JavaScript">try{expandTree();}catch(e){}</script>를 추가해주면 끝.


아래 스크린샷을 참조.(클릭하면 커짐)






'Tip > Blog' 카테고리의 다른 글

티스토리에 소스코드 집어넣기  (0) 2012.11.06
티스토리 카테고리 펼치기  (0) 2012.10.27

+ Recent posts