본문 바로가기

티스토리

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. 단계 : 1. core style sheet : 필수

    • core style sheet입니다.
    • 필수 항목입니다.
  2. 단계 : 2. theme style sheet : 택1

<!-- 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">
  1. 단계 : 3. core javascript : 필수

    • core javascript입니다.
    • 필수 항목입니다.
  2. 단계 : 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>
  1. 단계 : 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';
  1. 단계 : 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;
  1. 단계 : 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를 넣습니다. 이때 주의해야 할 점은 <> 문자는 &lt;&gt;로 바꿔줘야 합니다. 이게 좀 귀찮기는 하지만 블로그의 웹 에디터는 자동으로 변경하게 되어있으니 블로거들은 걱정 안 하셔도 될 듯합니다.

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

LanguageBrush name사용법
Applescriptapplescript<pre class="brush:applescript;">code ...</pre>
ActionScript3as3, actionscript3<pre class="brush:as3;">code ...</pre>
Bash/shellbash, shell<pre class="brush:bash;">code ...</pre>
ColdFusioncf, 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>
CSScss<pre class="brush:css;">code ...</pre>
Delphidelphi, pas, pascal<pre class="brush:delphi;">code ...</pre>
Diffdiff, patch<pre class="brush:diff;">code ...</pre>
Erlangerl, erlang<pre class="brush:erl;">code ...</pre>
Groovygroovy<pre class="brush:groovy;">code ...</pre>
JavaScriptjs, jscript, javascript<pre class="brush:js;">code ...</pre>
Javajava<pre class="brush:java;">code ...</pre>
JavaFXjfx, javafx<pre class="brush:jfx;">code ...</pre>
Perlperl, pl<pre class="brush:perl;">code ...</pre>
PHPphp<pre class="brush:php;">code ...</pre>
Plain Textplain, text<pre class="brush:plain;">code ...</pre>
PowerShellps, powershell<pre class="brush:ps;">code ...</pre>
Pythonpy, python<pre class="brush:py;">code ...</pre>
Rubyrails, ror, ruby<pre class="brush:ruby;">code ...</pre>
Scalascala<pre class="brush:scala;">code ...</pre>
Sass/Scsssass, scss<pre class="brush:scss;">code ...</pre>
SQLsql<pre class="brush:sql;">code ...</pre>
Visual Basicvb, vbnet<pre class="brush:vb;">code ...</pre>
XMLxml, 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 -