티스토리에서 소스코드 이쁘게 꾸미기

1. Syntax Highlighter Download

http://alexgorbatchev.com/SyntaxHighlighter/ 클릭

좌측의 download 클릭

앞부분의  Click here to download 글자를 클릭하면 syntaxhighlighter_최신버젼.zip 이 다운로드 됩니다.

첨부된 파일을 다운받으셔도 됩니다.

syntaxhighlighter_3.0.83.zip

2. 파일의 업로드

Tistory 관리자 페이지에서

꾸미기 / HTML/CSS 편집 / 파일업로드 클릭하여 하단의 추가버턴을 클릭합니다.

 shCore.js shCore.css, shThemeDefault.css 파일은 반드시 포한되어야 하는 파일이며 사용하는 언어만 추가 하여도 됩니다.

 용량에 크게 문제가 없으므로 다운받은 파일의 scripts폴더의 *.js 파일과 styles 폴더의 *.css 모든 파일을 업로더 합니다.

3. skin.html 수정

Tistory 관리자 페이지에서

꾸미기 / HTML/CSS 편집 / HTML/CSS 클릭하여 skin.html 파일을 수정합니다.

4. 소스코드 올리기

html버턴을 클릭하여 head 부분의 title 위에 아래의 내용을 적어주면 됩니다.

5. 지원되는 언어

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

Visual Basic vb, vbnet                            shBrushVb.js

XML xml, xhtml, xslt, html, xhtml    shBrushXml.js

6. Lisp언의 적용

Lisp 언어가 적용이 되지 않아서 shBrushCpp.js 파일을 수정하여 리습으로 변경하여 사용중입니다.

function Brush()
{
	var keywords  = 'abs alert alloc and angle angtof angtos append apply arx arxload arxunload ascii assoc atan atof atoi atom ' +
		'boole boundp ' +
		'car cdr cadr caar cdar cddr chr client_data_tile close command cond cons cos cvunit ' +
		'defun defun-q defun-q-list-ref defun-q-list-set dictadd dictnext dictremove dictrename dictsearch distance distof ' +
		'entdel entget entlast entmake entmakex entmod entnext entsel entupd eq equal error_function eval exit exp expand expt ' +
		'fill_image findfile fix float foreach function ' +
		'getangle getcfg getcname getcorner getdist getfiled getint getkword getpoint getreal getstring getvar grdraw grvecs ' +
		'handent help ' +
		'if initdia initget inters itoa ' +
		'lambda last layoutlist length list listp load load_dialog log logand logior lsh ' +
		'mapcar max mem member menucmd menugroup min minusp mode_tile ' +
		'namedobjdict nentsel nentselp new_dialog not nth null numberp ' +
		'open or osnap ' +
		'polar prin1 princ print progn prompt ' +
		'quit quote ' +
		'read read-char read-line redraw regapp rem repeat reverse rtos ' +
		'setcfg setenv setq setvar setview sin sqrt ssadd ssdel ssget ssgetfirst sslength ssname strcase strcat strlen substr ' +
		'tablet tblnext tblobjname tblsearch term_dialog terpri textbox textpage textscr trace trans type ' +
		'unload_dialog untrace ' +
		'vector_image ver vlisp-compile vports ' +
		'wcmatch while write-char write-line ' +
		'xdroom xdsize ' +
		'zerop';
	var operators = '+ - * / = /= < <= > >= 1+ 1- t nil';
	this.regexList = [
		{ regex: SyntaxHighlighter.regexLib.doubleQuotedString,	css: 'string' },
		{ regex: SyntaxHighlighter.regexLib.singleQuotedString,	css: 'functions' },
		{ regex: new RegExp('&\\w+;', 'g'), css: 'plain' },
		{ regex: new RegExp(';.*', 'g'), css: 'comments' },
		{ regex: new RegExp("'(\\w|-)+", 'g'), css: 'variable' },
		{ regex: new RegExp(this.getKeywords(keywords), 'gm'), css: 'keyword' },
	];
};

 6. 소스코드의 색상을 변경

 디폴트값으로 사용하는 것을 권장하지만 색상을 변경하려면 해당 css파일을 열어서 수정하면 됩니다.

 .syntaxhighlighter .keyword {
  color: blue !important;

  키워드에 해당하는 값을 파란색으로 적용하는 예제입니다.