루미오 : SyntaxHighlighter v3.0.83 (소스 코드 하이라이터) 설치 및 사용법

안녕하세요. 루미오입니다.

순서
1. SyntaxHighlighter 설치
2. SyntaxHighlighter 사용법

블로그를 운영하거나 웹 개발 시에 source code를 보기 좋게 하이라이트 하고 싶으시죠? 오늘은 소스 코드 하이라이터 중 가장 막강한 SyntaxHighlighter v3.0.83을 CDN을 이용한 설치와 사용법을 알아보겠습니다. 지금 보시는 페이지도 사용하고 있습니다.

SyntaxHighlighter는 현재 v4.0.1이 최신 버전입니다. 하지만 스스로 build를 해야 하고, CDN 서비스를 제공하지 않고 있습니다. build를 하자니 git도 설치하고, npm도 설치하고, minify도 해야 하고, source code도 일부 수정해야 하고 급 귀차니즘이 발동하네요. 그래서 SyntaxHighlighter v3.0.83의 파일은 CDN을 이용한 설치를 선택했습니다. 현재로서는 가장 편하고 쉬운 방법이네요.

SyntaxHighlighter 관련 URL은 아래와 같습니다.

≫ Home : http://alexgorbatchev.com/SyntaxHighlighter
≫ GitHub : https://github.com/syntaxhighlighter/syntaxhighlighter
≫ CDN : https://cdnjs.com/libraries/SyntaxHighlighter

1. SyntaxHighlighter 설치

이제 설치를 하겠습니다. (CDN url은 살짝 위를 보세요) 아래 코드를 html 파일의 <head> tag 안에 입력하세요.

하단의 → 코드 확인 및 테스트 버튼을 클릭하면 jsfiddle에서 바로 Test해 보실 수 있습니다.

<!-- 1. core style sheet : 필수 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css">

<!-- 2. theme style sheet : 택1 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.min.css">

<!-- 3. core javascript : 필수 -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js"></script>

<!-- 4. highlight 지원 언어 javascript : 지원할 언어만큼 선택 -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCss.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js"></script>

<!-- SyntaxHighlighter 초기화 -->
<script type="text/javascript">
	/* 5. set config : option */
	// option 지정

	/* 6. set defaults : option */
	// option 지정
	
	/* 7. 초기화 : 필수 */
	SyntaxHighlighter.all();
</script>

→ 코드 확인 및 테스트

comment에 다 설명을 했기 때문에 간단히 짚고 넘어가겠습니다. 총 7단계입니다.

단계 : 1. core style sheet : 필수
- core style sheet입니다.
- 필수 항목입니다.
단계 : 2. theme style sheet : 택1
- theme를 지정합니다. 1개만 선택하세요.
- 위의 code에서는 Default theme를 지정했습니다. 지금 보시는 페이지도 Default theme입니다.
- 원하시는 theme를 선택하셨으면 나머지 theme들은 지워주세요.
- Theme 미리보기 : http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/
- MDUltra theme 미리보기 : https://github.com/syntaxhighlighter/theme-mdultra
- theme 목록

<!-- Default theme -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.min.css">
<!-- Django theme -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDjango.min.css">
<!-- Eclipse theme -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeEclipse.min.css">
<!-- Emacs theme -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeEmacs.min.css">
<!-- FadeToGrey theme -->
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeFadeToGrey.min.css">
<!-- Midnight theme -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeMidnight.min.css">
<!-- RDark theme -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeRDark.min.css">
<!-- MDUltra theme -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeMDUltra.min.css">

단계 : 3. core javascript : 필수
- core javascript입니다.
- 필수 항목입니다.
단계 : 4. highlight 지원 언어 javascript : 지원할 언어만큼 선택
- source code를 highlight 하기 위한 파일입니다.
- highlight를 원하는 언어만 선택해서 포함하면 됩니다. (그냥 다 포함해도 상관없습니다)
- 어떤 언어를 지원하는 파일인지는 위 코드의 comment를 참조하세요.
- 지원 언어 목록

<!-- applescript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushAppleScript.min.js"></script>
<!-- as3, actionscript3 -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushAS3.min.js"></script>
<!-- bash, shell -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushBash.min.js"></script>
<!-- cf, coldfusion -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushColdFusion.min.js"></script>
<!-- cpp, c -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCpp.min.js"></script>
<!-- c#, c-sharp, csharp -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCSharp.min.js"></script>
<!-- css -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCss.min.js"></script>
<!-- delphi, pas, pascal -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushDelphi.min.js"></script>
<!-- diff, patch -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushDiff.min.js"></script>
<!-- erl, erlang -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushErlang.min.js"></script>
<!-- groovy -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushGroovy.min.js"></script>
<!-- java -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJava.min.js"></script>
<!-- jfx, javafx -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJavaFX.min.js"></script>
<!-- js, jscript, javascript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.min.js"></script>
<!-- perl, pl -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPerl.min.js"></script>
<!-- php -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPhp.min.js"></script>
<!-- plain, text -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPlain.min.js"></script>
<!-- ps, powershell -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPowerShell.min.js"></script>
<!-- py, python -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPython.min.js"></script>
<!-- rails, ror, ruby -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushRuby.min.js"></script>
<!-- scala -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushScala.min.js"></script>
<!-- sass scss -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushSass.min.js"></script>
<!-- sql -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushSql.min.js"></script>
<!-- vb, vbnet -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushVb.min.js"></script>
<!-- xml, xhtml, xslt, html, xhtml -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js"></script>

단계 : 5. set config : option
- 기본 환경설정을 합니다. 별도의 설정 없이 default로 사용하셔도 될 듯합니다.
- set config 목록

/* 5. set config : option */
/* [default:false]  blogger.com을 이용한다면 true */
SyntaxHighlighter.config.bloggerMode = false;
/* [default:Object] http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/strings.html */
SyntaxHighlighter.config.strings = Object;
/* [default:false]  소스이 <br />를 무시한다. */
SyntaxHighlighter.config.stripBrs = false;
/* [default:'pre']  <pre> tag대신 다른 tag를 지정함 */
SyntaxHighlighter.config.tagName = 'pre';

단계 : 6. set defaults : option
- 환경설정의 defaults 값을 변경합니다.
- 여기서 설정하면 모든 SyntaxHighlighter 코드에 반영 됩니다.
- 여기서 변경이 가능한 값들은 나중에 <pre> tag에서도 지정할 수 있습니다.

/* 6. set defaults : option */
/* [default:true]   URL 링크 여부 지정 */
SyntaxHighlighter.defaults['auto-links'] = true;
/* [default:'']     css class를 지정해서 style을 바꾼다 */
SyntaxHighlighter.defaults['class-name'] = '';
/* [default:false]  code 접기 기능 : bug 있음 */
SyntaxHighlighter.defaults['collapse'] = false;
/* [default:1]      시작 라인 번호 지정 */
SyntaxHighlighter.defaults['first-line'] = 1;
/* [default:true]   라인 번호 숨김 여부 지정 */
SyntaxHighlighter.defaults['gutter'] = true;
/* [default:null]   특정 라인을 강조함. array[3, 7] 또는 하나의 숫자만 사용할수 있음 */
SyntaxHighlighter.defaults['highlight'] = null;
/* [default:false]  HTML과 같이 사용될경우 HTML을 highlight할지를 결정함. shBrushXml.js가 필요함 */
SyntaxHighlighter.defaults['html-script'] = false;
/* [default:true]   탭을 smart하게 조정함 */
SyntaxHighlighter.defaults['smart-tabs'] = true;
/* [default:4]      탭 사이즈 변경 */
SyntaxHighlighter.defaults['tab-size'] = 4;
/* [default:true]   툴바 표시 지정 */
SyntaxHighlighter.defaults['toolbar'] = true;
/* [default:false]  라인번호 앞에 0을 채움 */
SyntaxHighlighter.defaults['pad-line-numbers'] = false;
/* [default:true]   double click으로 code 전체를 선택 */
SyntaxHighlighter.defaults['quick-code'] = true;

단계 : 7. 초기화 : 필수
- SyntaxHighlighter를 초기화합니다.
- 필수 항목입니다.

여기까지가 설치 끝입니다.

2. SyntaxHighlighter 사용법

이제 간단한 예제를 보면서 사용법에 대한 설명을 이어가겠습니다.

하단의 → 코드 확인 및 테스트 버튼을 클릭하면 jsfiddle에서 바로 Test해 보실 수 있습니다.

<!-- brush:js → javascript highlight 지정 -->
<pre class="brush:js;">
	<script type="text/javascript">	<!-- 주의 : "<" → "&amp;lt;", ">" → "&amp;gt;"로 바꿔야함 -->
		/** plus function */
		function plus(a, b) {
			return a + b;
		}
	</script>
</pre>

→ 코드 확인 및 테스트

<pre> tag 안에 source code를 넣습니다. 이때 주의해야 할 점은 <와 > 문자는 <와 >로 바꿔줘야 합니다. 이게 좀 귀찮기는 하지만 블로그의 웹 에디터는 자동으로 변경하게 되어있으니 블로거들은 걱정 안 하셔도 될 듯합니다.

highlight 될 언어는 class 명으로 지정합니다. 아래는 지정 가능한 개발 언어와 사용법 목록입니다.

Language	Brush name	사용법
Applescript	applescript	`<pre class="brush:applescript;">code ...</pre>`
ActionScript3	as3, actionscript3	`<pre class="brush:as3;">code ...</pre>`
Bash/shell	bash, shell	`<pre class="brush:bash;">code ...</pre>`
ColdFusion	cf, coldfusion	`<pre class="brush:cf;">code ...</pre>`
C#	c#, c-sharp, csharp	`<pre class="brush:c#;">code ...</pre>`
C++	cpp, c	`<pre class="brush:cpp;">code ...</pre>`
CSS	css	`<pre class="brush:css;">code ...</pre>`
Delphi	delphi, pas, pascal	`<pre class="brush:delphi;">code ...</pre>`
Diff	diff, patch	`<pre class="brush:diff;">code ...</pre>`
Erlang	erl, erlang	`<pre class="brush:erl;">code ...</pre>`
Groovy	groovy	`<pre class="brush:groovy;">code ...</pre>`
JavaScript	js, jscript, javascript	`<pre class="brush:js;">code ...</pre>`
Java	java	`<pre class="brush:java;">code ...</pre>`
JavaFX	jfx, javafx	`<pre class="brush:jfx;">code ...</pre>`
Perl	perl, pl	`<pre class="brush:perl;">code ...</pre>`
PHP	php	`<pre class="brush:php;">code ...</pre>`
Plain Text	plain, text	`<pre class="brush:plain;">code ...</pre>`
PowerShell	ps, powershell	`<pre class="brush:ps;">code ...</pre>`
Python	py, python	`<pre class="brush:py;">code ...</pre>`
Ruby	rails, ror, ruby	`<pre class="brush:ruby;">code ...</pre>`
Scala	scala	`<pre class="brush:scala;">code ...</pre>`
Sass/Scss	sass, scss	`<pre class="brush:scss;">code ...</pre>`
SQL	sql	`<pre class="brush:sql;">code ...</pre>`
Visual Basic	vb, vbnet	`<pre class="brush:vb;">code ...</pre>`
XML	xml, xhtml, xslt, html, xhtml	`<pre class="brush:xml;">code ...</pre>`

설치 시의 6단계에서 지정하던 defaults 옵션과 title을 여기서도 설정할 수 있습니다. 어떤 옵션을 바꿀지 주석을 확인해 보세요.

<pre class="brush:js;
            auto-links:false;		/* 오토 링크 해제 */
            class-name:'';			/* css class를 지정해서 style을 바꾼다 */
            collapse:false;			/* code 접기 기능 : bug 있음 */
            first-line:5;			/* 시작 행 번호 변경 */
            gutter:true;			/* 라인 번호 숨김 */
            highlight:[9, 13];		/* 특정 행 강조 */
            html-script:true;		/* HTML 소스표시 */
            smart-tabs:false;		/* 탭을 smart하게 조정함 */
            tab-size:2;				/* 탭 사이즈 변경 */
            toolbar:false;			/* 도구모음 숨기기 */
            pad-line-numbers:true;	/* 라인번호 앞에 0을 채운다. */
            quick-code:false;"		/* double click으로 code 전체를 선택하게 한다 */
     title="더하기 함수"			/* 제목 */
>
some code ...
</pre>

여기까지가 SyntaxHighlighter v3.0.83의 설치와 사용법을 알아봤습니다.

감사합니다.

- 루미오 . LOOMIO -

저작자표시 비영리 변경금지

'티스토리' 카테고리의 다른 글

티스토리 Poster 스킨 분류 전체보기 없애기 (5)	2018.11.20

SyntaxHighlighter v3.0.83 (소스 코드 하이라이터) 설치 및 사용법

1. SyntaxHighlighter 설치

2. SyntaxHighlighter 사용법

'티스토리' 카테고리의 다른 글

'티스토리' Related Articles

티스토리툴바