프로그램이나 홈페이지관련 포스팅을 하다보면 소스코드를 이쁘게 포스팅을 해야겠다는 생각이 많이 듭니다.
이번에 저도 포스팅을 하면서 소스코드에대한 포스팅을 해볼까해서 찾아봤는데.. 좋은 방법이 있어서 소개합니다.
SyntaxHighlighter라는 곳에서 라이선스프리로 제공을 하고 있습니다. 이 SyntaxHighlighter를 이용하는 방법을 설명하도록 하겠습니다.
제가 티스토리를 운영하기 때문에 티스토리기준으로 설명을 하겠으나 다른 곳에서도 충분히 활용이 가능합니다.
개략적인 순서는 아래와 같습니다.
- SyntaxHighlighter에서 관련 소스 다운로드 및 압축풀기
- 티스토리 서버에 올리기
- 티스토리의 "HTML/CSS 편집"메뉴에 적용하기
- 글쓰기 시 소스코드 출력하기
- SyntaxHighlighter의 사용설명서
그럼 먼저 다운로드 받는것 부터 설명들어갑니다.
1. SyntaxHighlighter에서 관련 소스 다운로드 및 압축풀기
소스를 제공해 주는 사이트에 접속을 해서 다운로를 받습니다.
처음에 어디에서 다운을 받나 무지 찾았었는데 오른쪽에 보니 "download"라는 메뉴가 있더군요
다운로드 메뉴를 누르면 아래의 화면이 나옵니다. http://alexgorbatchev.com/SyntaxHighlighter/download
다운로드 후 압축을 해제하면 여러가지 파일과 폴더가 나오는데 그중에 "scripts"와 "styles"의 폴더가 가장 중요하며 그 안에 있는 파일들을 티스토리에 업로드를 해야 합니다.
2. 티스토리 서버에 올리기
이번엔 티스토리 서버에 올려야 합니다.
모든 파일을 올리면 좋지만 너무 많이 올리고 적용을 하면 트래픽이 많이걸려 사이트 로딩이 늦어질 수 있으니 꼭 필요한것만 선택해서 올리는것이 바람직할 것 같습니다.
먼저 scripts폴더를 보면..
빨간선택상자의 shCore.js는 꼭 올려야 하구요. 나머지 파일들 중에 파일명 끝에 있는 이름(노란색표시)을 보면 해당 프로그램 언어의 명칭이 나와 있습니다. 보시고 필요한 것만 골라서 서버에 올리시면 됩니다.
이번엔 styles폴더를 보면...
빨간표시의 파일은 기본으로 올려야 합니다. 그리고 나머지파일들은 테마 파일입니다. 맘에 드는것으로 하나만 선택하시면 됩니다.
보관해 놨다가 기분이 바뀔때마다 소스코드에서 테마를 바꾸셔도 되구요
티스토리의 업로드는 아래와 같이 "HTML/CSS 편집"메뉴에서 하시면 됩니다.
"HTML/CSS 편집"메뉴의 파일업로드에서 "추가"버튼을 누른 후 아까 선택해 두셨던 파일들을 올리면 됩니다.
올려진 파일은 모두 images폴더로 들어갑니다.
3. 티스토리의 "HTML/CSS 편집"메뉴에 적용하기
이제는 올려진 파일들을 skin.html과 style.css에 적용을 해야 합니다.
먼저 아래의 코드를 <HEAD> ........ </HEAD>사이에 복사해서 넣습니다.
만약 나오지 않는다면 경로를 상대경로(./image)에서 절대 경로로 바꾸면 나올 수도 있습니다.
예를 들면..
./images/shCore.js 를 http://cfs.tistory.com/custom/blog/8/80326/skin/images/shCore.js
이런식으로 바꾸어 보시면 됩니다.
그리고 다음의 코드는.. </BODY>태그의 바로 위에 적용을 하면 됩니다.
4. 글쓰기 시 소스코드 출력하기
이제 기본 세팅은 완료되었습니다.
이제 티스토리의 글쓰기 시 소스코드가 나오게 표시하는 방법을 설명하도록 하겠습니다.
티스토리의 글쓰기 화면에서 1번 "HTML"를 선택해서 html입력모드로 전환합니다.
그리고 2번과 같이 소스를 입력하는데 입력하는 소스를 <pre>태그로 둘러싸고 class는 brush:프로그램명 을 쓰면 됩니다.
<pre class="brush: html">
function test() {
alert("SyntaxHighlighter를 티스토리에 적용하세욥");
}
</pre>
간단하죠? ^^
5. SyntaxHighlighter의 사용설명서
A. 브러시 적용하기
먼저 브러시 종류입니다. <pre class="brush:js">에서 js를 원하는 Brush aliases 명으로 바꾸면 됩니다.
| Brush name | Brush aliases | File name |
|---|---|---|
| ActionScript3 | as3, actionscript3 | shBrushAS3.js |
| Bash/shell | bash, shell | shBrushBash.js |
| ColdFusion | cf, coldfusion | shBrushColdFusion.js |
| C# | c-sharp, csharp | shBrushCSharp.js |
| C++ | cpp, c | shBrushCpp.js |
| CSS | css | shBrushCss.js |
| Delphi | delphi, pas, pascal | shBrushDelphi.js |
| Diff | diff, patch | shBrushDiff.js |
| Erlang | erl, erlang | shBrushErlang.js |
| Groovy | groovy | shBrushGroovy.js |
| JavaScript | js, jscript, javascript | shBrushJScript.js |
| Java | java | shBrushJava.js |
| JavaFX | jfx, javafx | shBrushJavaFX.js |
| Perl | perl, pl | shBrushPerl.js |
| PHP | php | shBrushPhp.js |
| Plain Text | plain, text | shBrushPlain.js |
| PowerShell | ps, powershell | shBrushPowerShell.js |
| Python | py, python | shBrushPython.js |
| Ruby | rails, ror, ruby | shBrushRuby.js |
| Scala | scala | shBrushScala.js |
| SQL | sql | shBrushSql.js |
| isual Basic | vb, vbnet | shBrushVb.js |
| XML | xml, xhtml, xslt, html, xhtml | shBrushXml.js |
B. 박스의 줄번호 끄기
기본은 줄번호가 나옵니다. 줄번호 끄기는 gutter: false; 를 추가로 넣어주세요
C. 줄 강조하기
2번째 줄을 강조하려면 highlight: 2의 속성을 추가하면 됩니다.
여러개의 줄을 강조하려면 highlight의 속성을 [1, 3]으로 추가하면 선택이 됩니다.
D. 시작 숫자 지정하기
소스코드의 중간을 표시할 경우 숫자값을 맞출 필요가 있습니다. first-line: 12 를 속성으로 추가하면 숫자가 12부터 시작합니다.
E. 가로 눈금 보이기
그럴일은 별로 없지만 가로눈금자가 필요한경우 ruler: true 를 속성에 추가하면 됩니다.
G. 모두 적용
지금까지 알아본 것을 모두 같이 사용할 수 있습니다. 필요할 경우가 많을것 같습니다
테마 변경하기
테마도 여러종류로 변경이 가능합니다.
<link type="text/css" rel="Stylesheet" href="PATH/Styles/shThemeDjango.css"/>
위의 css코드를 <HEAD>...</HEAD>안에 삽입을 하면 됩니다.
shThemeDjango.css 이름을 아래의 다른 이름으로 적용하면 다양한 테마를 설정할 수 있습니다.
| Name | File |
|---|---|
| Default | shThemeDefault.css |
| Django | shThemeDjango.css |
| Eclipse | shThemeEclipse.css |
| Emacs | shThemeEmacs.css |
| Fade To Grey | shThemeFadeToGrey.css |
| Midnight | shThemeMidnight.css |
| RDark | shThemeRDark.css |
아휴.. 힘들다..
다썼습니다. ^^
