티스토리 소스 코드 입력하기 : syntaxhighlighter 3.0.83

티스토리 소스 코드 입력하기 : syntaxhighlighter 3.0.83

티스토리에 소스코드를 이쁘게 입력하고 싶을 때 syntaxhighlighter라는 css와 js 파일을 설치하여 블로깅 할 때 깔끔하게 표현해주는 방법을 적어보고자 합니다. 사이트를 통해 최신 파일을 다운로드 하여 하나하나 진행해 보겠습니다.

현재는 3.0.83버전이 최신 버전이므로 아래 파일을 다운로드 합니다.

syntaxhighlighter_3.0.83.zip

위의 파일이 최신버전이 아닐 때 사이트를 통해 최신 파일을 받아 진행해 보겠습니다. syntaxhighlighter 사이트에 접속하여 최신 버전 파일을 다운로드(새창으로 링크) 받아야 합니다. 아래 그림처럼 사이트에 가게 되면 상단명칭중 3.0.83 whats new? 라는 글씨가 보입니다. 여기에서 whats new?를 클릭합니다.

다음 페이지로 이동하게 되는데 syntaxHighlighter의 기능을 설명되고 스크롤을 마지막까지 내리면 download라는 버튼이 보입니다. 누르게 되면 압축 파일을 다운로드 하게 됩니다.

압축파일을 풀면 compass, scripts, src, styles, tests 의 폴더와 index.html, LGPL-LICENSE, MIT-LICENSE 파일들이 보이게 됩니다. 다 사용하진 않고 scripts, styles 두 개의 폴더만 사용합니다.

먼저 scripts 폴더에 들어가면 아래처럼 파일이 여러개 나타납니다. 모조리 카피해서 사용할 수 있으나 js 파일이 많아지면 블로그에 접속했을 때 js 파일 읽어드리는 시간이 좀 더 걸릴 수 있으니 필요한 파일만 파일업로드에 추가해야 합니다. 가장 필수 파일은 shAutoloader.js와 shCore.js 두 개 파일입니다. ☆표시를 해뒀습니다.  그 외에는 소스코드를 작성할 때 어느 형태로 표현해 줄지 사용할 파일입니다. shBrushXml.js 파일은 html과, xml, xslt, xhtml 형태를 잘 표현해줍니다. 쿼리문을 작성하는 분은 shBurshSql.js 파일을 자바 파일은 shBrushJava.js 파일을 넣으면 됩니다. 아래에 그림으로 표현해줍니다.

css 파일도 마찬가지로 필수 파일은 shCore.css와 shThemeDefault.css 파일 두 개 입니다. 두 개 파일을 파일업로드에 추가 하면 됩니다. 아래에서 그림으로 표현해줍니다.

계정 관리자 페이지에 들어와서 [꾸미기] - [HTML/CSS 편집] - [파일업로드 탭]으로 이동합니다. 추가 버튼을 눌러 위에서 보여준 *.js파일와 *.css 파일을 업로드 시킵니다. 아래 그림은 업로드된 파일이며, 여기서 경로에 "images/파일들" 이 있습니다.

파일이 업로드 되었으니 실제 페이지에 적용시켜야 합니다. 우선 css 파일은 [HTML/CSS 탭]에서 추가 해야 합니다. skin.html 에서 상단에 사용되고 있는 href="./styels.css /> 밑에 다음내용을 추가합니다.

마찬가지로 skin.html 밑에 </body> 바로 위에 아래 그림처럼 내용을 추가합니다.

글을 작성할 때 HTML 모드(우측상단) 체크박스를 눌러서 아래 내용을 추가하고 소스코드1과 소스코드2 부분에 실제 들어갈 내용을 입력하면 됩니다.

     
     
     소스코드1 입력
     소스코드2 입력

pre class="brush: plain" 작성시 빨간색 부분을 아래와 같이 용도에 맞게 변경 사용가능합니다.

1. plain, text : 일반 텍스트 문서를 표현해줍니다.

2. css : css 문서를 보여줍니다.

3. xml : html, xslt, xhtml, xml 파일을 이쁘게 보여줍니다.

4. js, jscript, javascript : 자바스크립트 관련 소스를 이쁘게 보여줍니다.

5. java : java파일을 보여줍니다.

6. c, cpp : c와 c++을 이쁘게 보여줍니다.

7. sql : 쿼리문을 깔끔하게 보여줍니다.