[티스토리] 소스코드 잘 보여주는 방법(SyntaxHighlighter)
안녕하세요. 개발자 드리머즈입니다.
다른 티스토리 블로그에서는 소스코드를 보기 좋게 보여주고 있어, 저도 따라해봤습니다.
소스코드를 보기 좋게 만들어 주는 것의 이름은 SyntaxHighlighter입니다.
javascript와 css로 만들어져 있습니다.
(공식홈: http://alexgorbatchev.com/SyntaxHighlighter/)
먼저 아래의 주소를 클릭하여 SyntaxHighlighter 3.0.83 버전을 다운 받습니다.
https://github.com/syntaxhighlighter/syntaxhighlighter/archive/3.0.83.zip
공식홈에 간단한 설치 과정이 있지만.. 이 것 때문에 삽질을 많이 했습니다.
공식홈의 가이드는 무시하는게 좋을 것 같습니다.
제가 나름대로 정리해보겠습니다.
1.core 파일 업로드하기
좀 전에 다운받은 파일의 압축을 풀면 아래와 같습니다.
js파일들은 scripts 폴더에, css 파일들은 styles폴더에 존재합니다.
여기에 존재하는 파일을 블로그에 올리기 위해
(글을 쓰면 항상 적용되도록)
[관리자] -> [HTML/CSS 편집]을 클릭합니다.
그리고 [파일업로드]를 누르고, [+추가] 버튼을 누릅니다.
scripts 폴더에 있는 shCore.js 파일과 XRegExp.js(필수!) 파일,
styles 폴더에 있는 shCore.css 파일을 찾아 추가합니다.
주목할 점은 추가한 파일들이 images/ 경로 아래에 추가됐다는 점입니다.
2. brush 파일 업로드하기
brush 파일은 보여줄 코드의 언어와 관련되어 있습니다. 각 언어에 따라 문법이 다르므로 이런 파일이 필요하겠죠?
원하는 언어에 해당하는 brush 파일을 추가하면 됩니다. 여러 brush 파일들이 있는데,자세한 내용은 http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ 에서 확인 가능합니다.
scripts 폴더에 있는 모든 js파일을 다 추가해도 되지만, 저는 일단 자주 쓰는 몇 가지 언어(java, cpp 등)에 대한 js파일만 추가했습니다.
3. Theme 파일 업로드하기
styles 폴더에 있는 Theme에 의해 보여지는 코드의 글자색, 배경색 등을 다르게 나타낼 수 있습니다. 여러 Theme이 있는데 원하는 Theme을 적용하면 됩니다. 저는 기본 Theme인 shThemeDefault.css를 업로드 했습니다.
4. 업로드한 파일들 Include하기
업로드한 파일들을 Include하여 적용시켜야 합니다.
[HTML/CSS 편집]에서 [HTML]을 선택합니다.
<link href="./images/shCore.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="./images/XRegExp.js"></script> <script type="text/javascript"> |
그러면 아래와 같이 됩니다.
[저장]을 눌러 변경사항을 저장합니다.
5. 새 포스트에서 테스트하기
글쓰기를 눌러 새 글을 시작합니다.
오른쪽 상단 즈음에 보이는 HTML을 눌러 HTML 코드가 보이게 합니다.
그리고 아래 표의 코드를 복붙합니다.
<pre> ~ </pre> 내부의 값이 예쁘게 보일 예정입니다.
<pre class="brush: js"> |
그 다음에 글을 발행하면.. 아래처럼 보입니다~!!
function test()
{
return 10;
}
*주의 : 티스토리에서 스킨?을 변경하면.. 업로드한 파일과, 수정한 HTML의 내용이 모두 초기화 되는 것 같습니다. 그래서 스킨을 변경하면.. 위의 작업을 다시 해야 하는 것 같습니다. 참고하세요.
댓글 영역