블로그에 코드를 올릴 때, 그냥 올리면 가독성이 떨어진다.


그래서 Syntax Highlighting을 하는데


Sunlight 라는 툴을 이용하려고 한다.


- 설치 (Tistory 기준)


1. http://sunlightjs.com/ 에 접속을 해서 파일을 다운로드 후 압축을 푼다.


2. 사용하는 블로그의 설정 항목에서


HTML/CSS 편집 란으로 간 다음에 


압축을 푼 폴더에서 모든 .js , .css 파일을 업로드 한다.


(하위 폴더에 있는 스크립트 파일까지 올리세용~ 안올리시면 실행 안됩니다...)





3. 저장된 스크립트 파일의 경로를 파악한다.



4. </head> 바로 앞에 


<link rel="stylesheet" type="text/css" href="/path/to/sunlight.default.css" />
<script type="text/javascript" src="/path/to/sunlight-min.js"></script>
<script type="text/javascript" src="/path/to/sunlight.csharp-min.js"></script>

와 같이 입력 합니다.


여기서 제 /path/to


./images 입니다.


이 때, csharp 언어만 등록하였기 때문에,


다른 언어를 사용하려면 하나씩 입력을 해야 사용할 수 있습니다.


맨 첫번째 출에 테마 종류는 2개가 있습니다.


default, dark 2 종류가 있네요





5. </body> 앞에 다음과 같이 입력 합니다..



<script type="text/javascript">

    Sunlight.highlightAll();

</script>





- 사용 방법


1. 글을 쓰다가 코드를 집어 넣고 싶을 때, HTML 모드로 넘어간다.






2. 다음과 같이 입력하고 미리보기를 눌러보자


<pre class="sunlight-highlight-csharp">

public object DoStuff() {

    return new object();

}

</pre>


<pre></pre> 블록 안에 원하는 코드 내옹을 쓴다.


다른 언어를 사용하고 싶으면 csharp 부분을 다른 언어 이름으로 바꾼다






미리보기로 보면 코드가 출력됨을 확인할 수 있습니다.


작성하는데 왜케 오래걸리지;;


'컴퓨터공학 > Tool(IDE, Git, Etc)' 카테고리의 다른 글

튜토리얼 사이트  (0) 2013.01.03
twitter bootstrap  (0) 2013.01.03
코딩용 폰트 Bitstream Vera Sans Mono - 14.0  (0) 2012.06.30
이클립스 문맥 색깔 설정 파일  (0) 2012.06.04
이클립스 주석 단축키  (0) 2012.05.27

+ Recent posts