프로그램 코드를 올릴때 문제가 많아 네이버를 버리고 이곳으로 왔습니다.
그런데....
코드올릴때 보기좋게 해주는 플러그인이 기본 플러그인이 아니였군요 ㅜㅡ
이게 기본 플러그인이 아니였다니!!
1.플러그인 다운 받기
어찌됬건 설치해 봅시다.
2011년 1월 3일 기준으로 최신버전은 3.0.83 입니다.
Syntax Highlighter 홈패이지 가기
위링크를 클릭
다운로드 가서셔 다운받고 압축을 풀어 줍니다.
아름다운(?) 파일들
2.플러그인 파일 업로드
Html/CSS 편집에 가셔 파일들을 업로드로 가신후 다음 파일들을 업로드 합니다.
scripts/
styles/shCore□□□□□.css
를 업로드합니다.
shCore□□□□□.css는 테마파일로 테마확인 링크 누르시고 가셔서 각 테마 이름을 클릭하시면 셈플이 출력 됩니다. 테마를 확인하시고 마음에 드는 걸로 올리시면 됩니다.
귀찬으시면 아래 제가 정리한 태마 이미지를 보시고 결정하세요 ㅎㅎㅎ
p.s.
홈페이지에는
src/shCore.js
styles/shCore.css
styles/shThemeDefault.css
이렇게 파일을 업로드하라고 나와있는데
흠.....shCore□□□□□.css 파일은 어디에 쓰는거지? 라며 검색해봤더니 shCore.css와 shTheme□□□□□.css를 합친 파일 이랍니다 ㅡ.-;
테스트해보니 shCore□□□□□.css만 올려도 출력되는데 지장이 없더군요 ㅎㅎㅎ
3.코드 넣기
.css파일을 로드 합니다.
<link rel=stylesheet type=text/css href="./images/shCore□□□□□.css">
헤더와 해더사이에 '<link'가 모여있는 장소가 있습니다. 여기에 넣어 주세요.
살포시~ 넣습니다.
다음 코드를 </body>위에있는 </s_t3>위에 넣습니다.
<!-- SyntaxHighlighter 시작 --> <script type="text/javascript" src="./images/shCore.js"</script> <script type="text/javascript" src="./images/shAutoloader.js"</script> <script type="text/javascript"> //<![CDATA[ SyntaxHighlighter.autoloader( 'actionscript3 as3 ./images/shBrushAS3.js', 'bash shell ./images/shBrushBash.js', 'cf coldfusion ./images/shBrushColdFusion.js', 'c-sharp csharp ./images/shBrushCSharp.js', 'cpp c ./images/shBrushCpp.js', 'css ./images/shBrushCss.js', 'delphi pas pascal ./images/shBrushDelphi.js', 'diff patch ./images/shBrushDiff.js', 'erl erlang ./images/shBrushErlang.js', 'groovy ./images/shBrushGroovy.js', 'js jscript javascript ./images/shBrushJScript.js', 'java ./images/shBrushJava.js', 'jfx javafx ./images/shBrushJavaFX.js', 'perl pl ./images/shBrushPerl.js', 'php ./images/shBrushPhp.js', 'plain text ./images/shBrushPlain.js', 'ps powershell ./images/shBrushPowerShell.js', 'py python ./images/shBrushPython.js', 'ruby rails ror rb ./images/shBrushRuby.js', 'scala ./images/shBrushScala.js', 'sql ./images/shBrushSql.js', 'vb vbnet ./images/shBrushVb.js', 'xml xhtml xslt html ./images/shBrushXml.js' ); // SyntaxHighlighter.config.bloggerMode = true; // SyntaxHighlighter.config.stripBrs = true; // SyntaxHighlighter.defaults['html-script'] = True; SyntaxHighlighter.all(); //]]< </script> <!-- SyntaxHighlighter 끝 -->
위코드에서 원하는 브러쉬만 넣으세요.(필요없는건 지우시라능 ㅎㅎㅎ)
.js파일도 없어도 됩니다.
p.s. 설명에는
<!-- SyntaxHighlighter 시작 --> <script type="text/javascript" src="./images/shCore.js"></script> <script type="text/javascript" src="css/shBrushJScript.js"></script>
이런식으로 사용하라고 나와있습니다만.......Dynamic Brush Loading 이라는 기능이 있어 사용하는 브러쉬만 로드 할수 있다고 해서 위방식을 사용하였습니다.
그런데 이방법이 티스토리에서 페이지 별로 각각 필요한 브러쉬만 로드되는건지 SyntaxHighlighter.autoloader에 파라메타로 들어간값이 메번로드가 되는 건지는 잘 모르겠습니다 ㅡ.-;
3. 사용하기
<pre class=brush:html> 코드 1번 줄 코드 2번줄 </pre>
코드 1번 줄 코드 2번줄
