SyntaxHighlighter
SyntaxHighlighter는 블로그에 코드를 보기 좋게 해주기 위한 라이브러리이다. 물론 그냥 캡처해서 사진으로 올려도 되지만, 이게 더 있어보인다(?) 무엇보다 코드를 복사 할 수도 있기 때문에 사용하기 편하다. 그래서 나에겐 필수품!
SyntaxHighlighter를 적용하기 전엔 이렇게 보이지만
public static void main(String[] args) { System.out.println("###### 숫자 야구 게임 ######"); Playball pb = new Playball(); pb.paly(); }
SyntaxHighlighter를 적용하고 나면
public static void main(String[] args) {
System.out.println("###### 숫자 야구 게임 ######");
Playball pb = new Playball();
pb.paly();
}
이렇게 설명하기도, 보기도 쉽게 나타난다!
설치 및 적용
1) syntaxhighlighter-3.0.83 다운
https://github.com/syntaxhighlighter/syntaxhighlighter/releases
2) syntaxhighlighter-3.0.83 압축해제
2-1 scripts
2-2 styles
3) 블로그 관리 > 꾸미기 > 스킨 편집 > html편집 > 파일업로드
scripts 폴더 안에서 자신이 사용할 코드만 업로드
stlyes 폴더 안에서 자신이 원하는 테마 업로드
나는 scrpits는 그냥 다 넣었다. 나중에 쓸 일이 있겠지 뭐. (귀찮)
기본 테마는 shCore.css 와 shCoreDefult.css 이다.
* 티스토리에서 파일 업로드 할 경우에는 images 폴더에 다 들어간다.
혹여 나중에 스타일을 적용할 때 폴더 위치를 주의하자!
4) HTML 편집 ( header 부분 )
<link type="text/css" rel="Stylesheet" href="./images/shCore.css"> <link type="text/css" rel="Stylesheet" href="./images/shCoreDefault.css"> <script type="text/javascript" src="./images/XRegExp.js"></script> <script type="text/javascript" src="./images/shAutoloader.js"></script> <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/shBrushCss.js"></script> <script type="text/javascript" src="./images/shBrushDiff.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/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/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/shBrushAppleScript.js"></script> <script type="text/javascript" src="./images/shBrushColdFusion.js"></script> <script type="text/javascript" src="./images/shBrushCSharp.js"></script> <script type="text/javascript" src="./images/shBrushDelphi.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/shBrushAS3.js"></script> <script type="text/javascript" src="./images/shBrushJavaFX.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"> SyntaxHighlighter.defaults["toolbar"] = false; SyntaxHighlighter.defaults["tab-size"] = 2; SyntaxHighlighter.all(); </script>
31~32행 : 설정같은건데 안해도 됨. (밑에 상세설정에서 설명)
33행 : SyntaxHighlighter 함수 실행
저장하면 설치 및 적용 끝!
사용법
글을 작성 시 코드를 삽입 해야 할 때 원하는 곳의 위치를 기억해 두고
HTML 편집 버튼을 눌러 들어가서 원하는 위치에
<pre class="brush:코드언어">
(코드)
</pre>
이렇게 태그로 감싸줘서 코드를 입력하면 끝!
** 코드 언어 부분은 brush aliases 참고해서 사용하는 언어 넣으면 됨.
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
예)
<pre class="brush:java">
public static void main(String[] args) {
System.out.println("Hello, World!");
}
</pre>
public static void main(String[] args) {
System.out.println("Hello, World!");
}
테마 적용
http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/
위 링크에 가면 테마들이 있는데 원하는 테마를 고르고 파일 업로드를 해준 뒤
<link type="text/css" rel="Stylesheet" href="./images/shCore.css"> <link type="text/css" rel="Stylesheet" href="./images/shThemeRDark.css">
HTML을 수정해주면 된다. 기본인 shCoreDefults.css 링크를 삭제후, shThemeRDartk.css를 넣어줌.
상세 설정
http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/
위 링크에 가면 설정들을 할 수 있다.
예를 들어 줄에 하이라이트를 주고, 타이틀을 넣고 싶으면
<pre class="brush:java; highlights: 2" title="hello, world! TEST">
public static void main(String[] args) {
System.out.println("Hello, World!");
System.out.println("Hello,");
System.out.println("World!");
}
</pre>
public static void main(String[] args) {
System.out.println("Hello, World!");
System.out.println("Hello,");
System.out.println("World!");
}
근데 설정들을 앞으로 이 블로그에서 작성할 모든 코드들에게 적용하고 싶으면
HTML header 부분에 default 지정을 하면 된다. (2, 3행)
그럼 끝! 사용 시작~!
* 시간 나면 http://gyuha.tistory.com/405 참고해서 코드 수정
