OVERCODE

티스토리에서 SyntaxHighlighter 설치 및 적용 (소스 문법 강조) 본문

HTML/CSS/JS

티스토리에서 SyntaxHighlighter 설치 및 적용 (소스 문법 강조)

오버코드 2015. 10. 8. 19:46

블로그를 보다보면 소스코드 구문강조 색이 이쁘게 적용되어 있는 글들을 심심치 않게 볼 수가 있었다.


이번에 티스토리를 시작하면서 나도 그 기능이 필요하게 되었는데 찾아보니, SyntaxHighlighter 라는 자바스크립트 라이브러리였다.


티스토리 블로그에 직접 적용시키면서 터득한 내용을 적어보고자 한다.




먼저 사이트에 들어가서 다운을 받아야한다.


http://alexgorbatchev.com/SyntaxHighlighter/download/





Click here to download 를 클릭하면 바로 다운로드 된다.





이제 티스토리에 업로드를 해보자.


압축파일을 보면 아래와 같은 폴더와 파일이 나온다.



이 중에서 업로드 할 파일은 scripts 폴더에 있는 모든 파일과 styles 폴더에 있는 모든 파일을 업로드 하면 된다.



관리 > HTML / CSS 편집으로 가서 파일업로드를 클릭하고 해당 scripts 와 styles 폴더 밑에 있는 모든 파일을 업로드 해버리면 된다~!




그러면 이제 준비는 끝났고 티스토리의 소스코드에 적용을 시키면 된다.



HTML 버튼을 눌러 HTML 소스를 보면 <head> ................. </head> 사이의 아무곳에나 아래 코드를 삽입한다.


(참고로 나는 </head> 바로 위에다가 삽입하였다)


<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shLegacy.js"></script>
<script type="text/javascript" src="./images/shBrushBash.js"></script>
<script type="text/javascript" src="./images/shBrushCpp.js"></script>
<script type="text/javascript" src="./images/shBrushCSharp.js"></script>
<script type="text/javascript" src="./images/shBrushCss.js"></script>
<script type="text/javascript" src="./images/shBrushDelphi.js"></script>
<script type="text/javascript" src="./images/shBrushDiff.js"></script>
<script type="text/javascript" src="./images/shBrushGroovy.js"></script>
<script type="text/javascript" src="./images/shBrushJava.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushPhp.js"></script>
<script type="text/javascript" src="./images/shBrushPlain.js"></script>
<script type="text/javascript" src="./images/shBrushPython.js"></script>
<script type="text/javascript" src="./images/shBrushRuby.js"></script>
<script type="text/javascript" src="./images/shBrushScala.js"></script>
<script type="text/javascript" src="./images/shBrushSql.js"></script>
<script type="text/javascript" src="./images/shBrushVb.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="./images/shCore.css">
<link type="text/css" rel="stylesheet" href="./images/shThemeDefault.css">
<script type="text/javascript">
SyntaxHighlighter.all();
</script>


js 파일이 Syntax 를 구현해주는 자바스크립트이고 shThemeDefault.css 는 테마가 지정되있는 스타일시트이다.

css 파일을 다른 테마로 바꿀수도 있다.



이제 티스토리에 글을 쓸때 어떻게 적용하면 되는지 보자.

<pre class="brush:html;">
    <h1>Hello, world!</h1>
    <p>이런식으로 소스를 넣으면 된다.</p>
</pre>

brush:html 부분을 해당되는 언어로 바꿔서 사용하면 된다. (PHP 예 : brush:html → brush:php )



지원하는 Syntax 언어는 아래와 같다.


Brush nameBrush aliasesFile name
ActionScript3as3, actionscript3shBrushAS3.js
Bash/shellbash, shellshBrushBash.js
ColdFusioncf, coldfusionshBrushColdFusion.js
C#c-sharp, csharpshBrushCSharp.js
C++cpp, cshBrushCpp.js
CSScssshBrushCss.js
Delphidelphi, pas, pascalshBrushDelphi.js
Diffdiff, patchshBrushDiff.js
Erlangerl, erlangshBrushErlang.js
GroovygroovyshBrushGroovy.js
JavaScriptjs, jscript, javascriptshBrushJScript.js
JavajavashBrushJava.js
JavaFXjfx, javafxshBrushJavaFX.js
Perlperl, plshBrushPerl.js
PHPphpshBrushPhp.js
Plain Textplain, textshBrushPlain.js
PowerShellps, powershellshBrushPowerShell.js
Pythonpy, pythonshBrushPython.js
Rubyrails, ror, rubyshBrushRuby.js
ScalascalashBrushScala.js
SQLsqlshBrushSql.js
Visual Basicvb, vbnetshBrushVb.js
XMLxml, xhtml, xslt, html, xhtmlshBrushXml.js

테마는 아래와 같은 테마들이 있는데 <head> 태그 사이에 삽입했던 css 를 해당 테마css 로 바꾸면 된다.


NameFile
DefaultshThemeDefault.css
DjangoshThemeDjango.css
EclipseshThemeEclipse.css
EmacsshThemeEmacs.css
Fade To GreyshThemeFadeToGrey.css
MidnightshThemeMidnight.css
RDarkshThemeRDark.css

파일을 모두 미리 업로드 시켜놨기 때문에 HTML 만 수정해주면 된다~


저작자표시 비영리 변경금지

'HTML/CSS/JS' 카테고리의 다른 글

javascript 유니코드변환함수 escape(), encodeURI(), encodeURIComponent() 비교  (0) 2017.03.12
티스토리에 highlight.js 문법강조 적용(syntax highlighting for the web)  (0) 2016.01.26
쿠키(Cookie)와 세션(Session)  (0) 2016.01.13

공유하기 링크
'HTML/CSS/JS' Related Articles more
Comments