본문으로 바로가기

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 참고해서 코드 수정


'공부 > HTML&CSS' 카테고리의 다른 글

SyntaxHighlighter 사용하기 (Tistory에 적용)  (1) 2018.04.17

댓글을 달아 주세요

  1. BlogIcon #에게 2018.10.24 18:28 신고

    스킨 바꿀 때 마다 적용해야 되서 귀찮다ㅠㅠ