syntaxhighlighter - 블로그 게시글을 올릴때 소스코드를 보기좋게 올릴수있게 해주는 기능
syntaxhighlighter_3.0.83.zip위 파일을 다운을 받고 압축을 해제합니다.
블로그 관리 - 꾸미기(스킨 편집) - html 편집 - 파일 업로드에서
다운 받은 폴더에서 script와 style폴더 안에있는 모든 파일들을 업로드 합니다.
아래와 같은 소스를 </head> 바로 윗줄에 아래의 소스코드를 붙여넣기를 하고 저장을 누릅니다.
<script type="text/javascript" src="./images/shCore.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" 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>
<script type="text/javascript" src="./images/shBrushMatlab.js"></script>
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
아래의 그림과 같이 글쓰기를 누릅고 HTML부분에 체크를 합니다.
<pre class="brush: java">
(소스 코드)
</pr>
안에 소스코드를 넣으면 됩니다.
brush: java 부분은 올리실 코드의 언어를 입력하시면 됩니다.
ex) html 입력 시
<pre class="brush: html">
(소스 코드)
</pre>
HTML 체크를 해제하면 아래와 같은 그림이 나옵니다. 코드를 제외한 나머지 글은 박스 바깥에 쓰시면 되고
또 하나의 소스코드를 넣으실려면 pre 태그를 한번 더 추가하여 사용하시면 됩니다.
미리보기를 누르면 아래와 같은 나옵니다.
