SyntaxHighlighter를 적용한지 꽤 되서 블로그 업데이트를 겸 새로운 버전을 적용해 보았다.
#1 다운로드
홈페이지 주소도 바뀌었네요.
먼저 다운로드 받고
한글도 지원하니
# 2 단계 블로그에 적용
1. 압축을 해제하면 필요한 파일을 업로드 해야 한다.
[그림1]
[그림1]
압축을 해제하면 test.html파일이 보이는데 이 파일을 에디터에서 오픈한다.
여기에 필요한 파일들을 파악한다.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>SyntaxHighlighter Build Test Page</title> <script type="text/javascript" src="scripts/shCore.js"></script> <script type="text/javascript" src="scripts/shBrushBash.js"></script> <script type="text/javascript" src="scripts/shBrushCpp.js"></script> <script type="text/javascript" src="scripts/shBrushCSharp.js"></script> <script type="text/javascript" src="scripts/shBrushCss.js"></script> <script type="text/javascript" src="scripts/shBrushDelphi.js"></script> <script type="text/javascript" src="scripts/shBrushDiff.js"></script> <script type="text/javascript" src="scripts/shBrushGroovy.js"></script> <script type="text/javascript" src="scripts/shBrushJava.js"></script>
<script type="text/javascript" src="scripts/shBrushJScript.js"></script> <script type="text/javascript" src="scripts/shBrushPhp.js"></script> <script type="text/javascript" src="scripts/shBrushPlain.js"></script> <script type="text/javascript" src="scripts/shBrushPython.js"></script> <script type="text/javascript" src="scripts/shBrushRuby.js"></script> <script type="text/javascript" src="scripts/shBrushScala.js"></script>
<script type="text/javascript" src="scripts/shBrushSql.js"></script> <script type="text/javascript" src="scripts/shBrushVb.js"></script> <script type="text/javascript" src="scripts/shBrushXml.js"></script> <link type="text/css" rel="stylesheet" href="styles/shCore.css"/> <link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/> <script type="text/javascript"> SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf'; SyntaxHighlighter.all(); </script>파일 업로드scripts 디렉터리 파일들, styles 디렉터리 파일들을 모두 업로드 한다.블로그 - 관리자 - 스킨 - HTML/CSS편집 - 파일 업로드두 images 디렉터로 하위에 업로드 된다.
# 다음은 script 추가test.html에서 확인한 script의 패스부분을 수정해서 추가해 놓는다.HTML/CSS 편집에 아래 스크립트를 헤더 부분에 추가한다.<script type="text/javascript" src="images/shCore.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.config.clipboardSwf = 'images/clipboard.swf';
SyntaxHighlighter.all();
</script>#3 확인test.html의 코드를 그대로사용해 보자.문서 작성후 html보기에서 아래 코드를 삽입하고 내용을 확인해 본다.<pre class="brush: c-sharp;">
function test() : String
{
return 10;
}
</pre>function test() : String { return 10; }Happy Coding~:)
기본 양식.htm
