syntaxhighlighter 사용법 (티스토리 적용소스 코드에 색깔 입히기)
제블로그에선 색깔을 먹이기 위해 다른 방법을 썼었는데 블로그를 몇번 돌아다니다 보니 코드에 자동으로 색깔등이 부여가 되는걸보고 깜놀..
그래서 방법을 찾아보았습니다. 이렇게 좋은방법이 있을수가..
순서대로 따라하면 다됩니다.
1. http://alexgorbatchev.com/SyntaxHighlighter/ 이사이트에 접속해서 download 버튼을 누른뒤 Click here to download를 통해 먼저 파일을 받습니다.
2. 관리하는 사이트에서 admin에 들어가면 HTML/CSS편집 창이 있습니다. 누르시면됩니다.
3. 누르면 다음과 같은 화면이 뜹니다. 아래화면중 파일업로드 버튼을 누르고 받은 파일의 scripts안에 파일들을 모두 선택해 열기를 누른뒤 저장합니다.
4. 그다음 syntaxhighlighter 폴더에 styles 폴더를 들어가서 파일을 위아 같이 동일하게 추가해 줍니다. shCore.css는 기본 으로 들어가야 작동 합니다. 전 shThemeRDark.css 스타일을 적용하고자 shThemeRDark.css를 업로드 했습니다. 위와같은 방법으로 파일을 업로드 합니다.
기본 디자인을 사용하실분은 shCoreDefault.css파일을 업로드 하시면 됩니다.
5. 파일을 올렸으니 첨부시켜야 작동하겠죠. HTML을 누르고 아래 문구를 추가합니다.
shThemeRDark 를 추가 했습니다. 전 이스타일을 쓰려고요 바꾸려면 딴파일을 선택 하시면 되겠죠.
<link rel="stylesheet" type="text/css" href="./images/shCoreDefault.css" />
다른언어도 쓸일이 있을지 모르지만 script에 전부 포함시켰습니다.
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shAutoloader.js"></script>
<script type="text/javascript" src="./images/shBrushAppleScript.js"></script>
<script type="text/javascript" src="./images/shBrushAS3.js"></script>
<script type="text/javascript" src="./images/shBrushBash.js"></script>
<script type="text/javascript" src="./images/shBrushColdFusion.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/shBrushErlang.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/shBrushJavaFX.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushPerl.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/shBrushPowerShell.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/shBrushSass.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/shLegacy.js"></script>
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
6. 작업완료! 테스트만 해보면 되겠내요
블로그 글작성중 html모드에서 <pre class="brush:원하는언어"> 내용줄줄줄~~~ php 어쩌구 </pre>" 로사용하면됩니다.
다른언어중 php는 <? 이게들어가교 asp는 <% 이게 들어가죠 이런꺽쇠 < > 표시가 들어가면 인식이 안됩니다 그러므로 꺽쇠<애는 <로 변경 > 애는 >로 변경해줘야 인식이 됩니다.
JAVA 언어로 테스트 해보죠
<pre class="brush: java">
public static void main(String[] args)
{
System.out.println("syntaxhighlighter 테스트 입니다.");
}
</pre>
글쓰기를 누른뒤 HTML 버튼을 누른뒤 아래와 같이 입력해보고 블로그에서 확인해봅니다.
7. html 강조를 하고싶을땐 속성 조작을 통해 html 코드도 색깔을 입힐수 있습니다.
아래와 같이 html-script: ture;로 해주면 html 코드도 예쁘게 바뀌네요~
<pre class="brush: java; html-script: true;">
</pre>