suroMind

[Tip]SyntaxHighlighter로 소스코드 이쁘게 만들기 본문

IT분야/Tip

[Tip]SyntaxHighlighter로 소스코드 이쁘게 만들기

suroMind 2011. 10. 27. 15:02
얼마전에 SyntaxHighlighter로 설정을 해봤습니다.
코드가 상당히 깔끔하게 정돈되어서 나오네요..

1. 먼저 다운 받고 티스토리 블로그에 설정을 해야 합니다
   http://alexgorbatchev.com/SyntaxHighlighter/
   사이트에 들어가서 3.0버전을 다운 받고 압축을 풀어 줍니다.


2. 압축을 풀고 아래의 폴더중 scripts폴더와 styles폴더 안에 있는 넘들을 죄다 티스토리블로그로 업로드합니다.




아래처럼 HTML/CSS 편집하는 곳에 업로드하는 곳이 있습니다.

폴더 통째로 올리시지 마시고 안에 들어있는 파일을 업로드 하세용

3. 업로드 다 하셨으면 아래처럼 HTML/CSS 편집 메뉴로 들어가서 코드를 넣어 줍니다.
     아래 블록된 코드처럼 css를 로드시킵니다.



아래처럼 스크립트파일을 로드시킵니다. C#,java,php등 원하는 스크립트를 로드 시키면 되겠지요..
단 </body> 바로 위에 넣으셔야 합니다.


4. 그럼 이제 사용해봐야겠지요..
  글쓰기를 누른 후 나오는 위지윅 편집기에서 HTML에 체크하신후
 

 <pre class="brush:c#">
     private void start(String temp){
         String temp;
     }
</pre>

위 와 같은 형태로 pre 태그로 묶고 brush를 지정해 주시면 됩니다..




Comments