반응형
SyntaxHighlighter를 이용하면 소스 코드를 블로그에 올릴때 깔끔하고 보기 좋게 올릴 수 있습니다.
설치와 사용은 꽤 간단합니다.
1. 다운로드
2. 업로드
압축을 풀면 나오는 scripts, styles 폴더에 있는 파일들을 업로드합니다.
모든 파일을 다 넣을 필요는 없으며, 본인이 필요한 것만 넣으면 됩니다.
3. 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><code />
4. html 수정
<body>태그를 찾아 아래와 같이 변경.
<body Onload="dp.SyntaxHighlighter.HighlightAll('code');"><code />
5. 적용
저 같은 경우는 <pre>태그를 이용하는데 <textarea>를 이용하는 분들도 있더라구요.
<pre class="brush:language">Hello World</pre><code />
지금까지 SyntaxHighlighter를 이용해서 티스토리 블로그에 소스코드를 깔끔하게 올리는 방법을 알아봤습니다.
텍스트로 정리하는것 보단 훨씬 가독성이 좋아졌네요!
반응형
