SyntaxHighlighter를 이용하면 소스 코드를 블로그에 올릴때 깔끔하고 보기 좋게 올릴 수 있습니다.

설치와 사용은 꽤 간단합니다.


다운로드

SyntaxHighlighter 홈페이지


업로드

압축을 풀면 나오는 scripts, styles 폴더에 있는 파일들을 업로드합니다.

모든 파일을 다 넣을 필요는 없으며, 본인이 필요한 것만 넣으면 됩니다.


script/css 추가

아래 내용을 <head></head> 사이에 넣습니다.

물론 조금전에 업로드한 .js, .css파일에 따라 아래 내용은 달라져야겠죠?


<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>


html 수정

<body>태그를 찾아 아래와 같이 변경.

<body Onload="dp.SyntaxHighlighter.HighlightAll('code');">


적용

저 같은 경우는 <pre>태그를 이용하는데 <textarea>를 이용하는 분들도 있더라구요.

<pre class="brush:language">Hello World</pre>

brush:language에는 적용할 언어를 넣어줍니다.


지금까지 SyntaxHighlighter를 이용해서 티스토리 블로그에 소스코드를 깔끔하게 올리는 방법을 알아봤습니다.


텍스트로 정리하는것 보단 훨씬 가독성이 좋아졌네요!


WRITTEN BY
덜구
시간나면 강아지들 데리고 캠핑도 가고, 셀프 리모델링도 하고 이것 저것 하면서 즐겁게 잘 살고 있습니다 :-)

트랙백  0 , 댓글이 없습니다.
secret