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 태그로 묶고 brush를 지정해 주시면 됩니다..

코드가 상당히 깔끔하게 정돈되어서 나오네요..
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를 지정해 주시면 됩니다..