SyntaxHighlighter 3.0.83 설치와 사용방법

블로그/블로그 꾸미기

SyntaxHighlighter 3.0.83

SyntaxHighlighter(신택스하이라이터)는 웹사이트나 블로그에 소스 코드를 표시할 수 있게 해 주는 자바스크립트 라이브러리입니다. 아래 보기는 HTML 소스 코드에 SyntaxHighlighter를 적용한 것입니다. HTML 이외에도 ColdFusion, CSS, JavaScript, PHP, Ruby 등 다양한 코드에 SyntaxHighlighter를 적용할 수 있어서 소스 코드 등 개발 문서를 웹에 게시할 때 유용하게 사용됩니다.

<pre class="brush:html">  <!-- HTML 소스표시 -->
<pre class="brush:css">   <!-- CSS 소스표시 -->
<pre class="brush:js">    <!-- JavaScript 소스표시 -->
<pre class="brush:html highlight:[2,4]">  <!-- 특정 행 강조 -->
<pre class="brush:js html-script:true">   <!-- 다른 언어와 HTML -->
<pre class="brush:html first-line:25">    <!-- 시작 행 번호 변경 -->
<pre class="brush:html toolbar:false">    <!-- 도구모음 숨기기 -->
<pre class="brush:html auto-links:false"> <!-- 오토 링크 해제 -->
<pre class="brush:html" title="Blomari Note">  <!-- 제목 표시 -->

SyntaxHighlighter 3.0.83 설치

우선 SyntaxHighlighter 3.0.83을 내려 받습니다.
현재 최신 버전은 3.0.83 인데... 거의 3년 전부터 변함이 없습니다.
개발자 홈페이지나 블로그 중에서 내려 받으세요
[SyntaxHighlighter Home]


내려 받은 파일의 압축을 풀면 아래처럼 여러 가지 파일과 폴더가 있습니다. 여기서 실제로 사용되는 파일은 [scripts] 폴더 안에 있는 JavaScript 파일과 [styles] 폴더 안에 있는 CSS 파일들 입니다. 이 두 폴더의 파일 전부를 서버에 올려도 좋고, 아니면 필요한 파일만 선택해서 올려도 됩니다.

압축 해제 폴더

티스토리 관리자 → HTML/CSS 편집 → 파일업로드에서 두 폴더의 파일 전부를 올립니다.
skin.html 파일 편집에서 아래의 보기처럼 6번 줄을 복사해서 <head>와 </head> 사이에 넣어주고,
(아래 화면을 더블 클릭하면 복사할 수 있습니다.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="./images/shCoreDefault.css" />
 
<title>블로마리 노트</title>
</head>

js 파일 설정은 </body> 바로 위에 넣어줍니다. 즉, 아래의 1~38번 줄을 복사해서 skin.html 파일에 붙여 넣습니다.
참고로, 티스토리에서는 </body>가 아니라 </body> 바로 위에 있는 </s_t3> 위에 넣으셔야 합니다.
아래를 보시고 넣는 위치를 확인하세요.

<!-- SyntaxHighlighter 시작 -->
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shAutoloader.js"></script>
<script type="text/javascript">
//<![CDATA[
SyntaxHighlighter.autoloader(
'applescript            ./images/shBrushAppleScript.js',
'actionscript3 as3      ./images/shBrushAS3.js',
'bash shell             ./images/shBrushBash.js',
'coldfusion cf          ./images/shBrushColdFusion.js',
'cpp c                  ./images/shBrushCpp.js',
'c# c-sharp csharp      ./images/shBrushCSharp.js',
'css                    ./images/shBrushCss.js',
'delphi pascal          ./images/shBrushDelphi.js',
'diff patch pas         ./images/shBrushDiff.js',
'erl erlang             ./images/shBrushErlang.js',
'groovy                 ./images/shBrushGroovy.js',
'java                   ./images/shBrushJava.js',
'jfx javafx             ./images/shBrushJavaFX.js',
'js jscript javascript  ./images/shBrushJScript.js',
'perl pl                ./images/shBrushPerl.js',
'php                    ./images/shBrushPhp.js',
'text plain             ./images/shBrushPlain.js',
'py python              ./images/shBrushPython.js',
'ruby rails ror rb      ./images/shBrushRuby.js',
'sass scss              ./images/shBrushSass.js',
'scala                  ./images/shBrushScala.js',
'sql                    ./images/shBrushSql.js',
'vb vbnet               ./images/shBrushVb.js',
'xml xhtml xslt html    ./images/shBrushXml.js'
);
SyntaxHighlighter.config.bloggerMode = true;
 // SyntaxHighlighter.config.stripBrs = true;
 // SyntaxHighlighter.defaults['html-script'] = True;
SyntaxHighlighter.all();
//]]> 
</script>
<!-- SyntaxHighlighter 끝 -->
</s_t3>
</body>
</html>

SyntaxHighlighter 3.0.83 사용 방법

설치를 마치고 블로그에 소스 코드를 표시할 때에는 <pre> 태그와 class를 이용합니다.
사용법은 아래와 같습니다.

<head>
<link rel="stylesheet" type="text/css" href="./images/shCoreDefault.css" />
<title>블로마리 노트</title>
</head>

위의 소스 코드를 블로그에 표시하려면 아래처럼 "<"을 "&lt;"로,
">"을 "&gt;"로 바꾼 후 HTML 모드에서 글을 작성하면 됩니다.

<pre class="brush:html">
&lt;head&gt;
&lt;link rel="stylesheet" type="text/css" href="./images/shCoreDefault.css" /&gt;
&lt;title&gt;블로마리 노트&lt;/title&gt;
&lt;/head&gt;
</pre>

 
<head>
<link rel="stylesheet" type="text/css" href="./images/shCoreDefault.css" /> 
<title>블로마리 노트</title>
</head>

각 테마의 모습은 [SyntaxHighlighter - Theme] 페이지에서 확인하시고, 마음에 드는 것으로 설정하세요.
아래 테마는 Midnight(shThemeMidnight.css)입니다.

Midnight Theme

▶ 만약 필요한 언어만 선택해서 서버에 올릴 경우... 「shCore.js」 파일은 필수입니다.
저는 CSS와 JavaScript 그리고 HTML 언어만 취급할 것이므로 아래처럼 설치했습니다.
「shBrushCss.js」 「shBrushJScript.js」 「shBrushXml.js」와 「shCore.js」을 함께 업로드 해야 합니다.

<head>
<link rel="stylesheet" type="text/css" href="./images/shCoreDefault.css" />

<title>블로마리 노트</title>
</head>

<!-- SyntaxHighlighter 시작 -->
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shAutoloader.js"></script>
<script type="text/javascript">
//<![CDATA[
SyntaxHighlighter.autoloader(
'css                    ./images/shBrushCss.js',
'js jscript javascript  ./images/shBrushJScript.js',
'xml xhtml xslt html    ./images/shBrushXml.js'
);
SyntaxHighlighter.config.bloggerMode = true;
 // SyntaxHighlighter.config.stripBrs = true;
 // SyntaxHighlighter.defaults['html-script'] = True;
SyntaxHighlighter.all();
//]]> 
</script>
</s_t3>
</body>
</html>

shCore와 shTheme 차이

"shCore"는 "코어" 스타일로 설정 초기화 등을 담당하고 있기 때문에 외형 장식은 없습니다.
"shTheme ~~~.css"라는 이름의 css파일은 "테마" 스타일로 외형 장식을 담당합니다.
그래서 "shCore"와 "shTheme~~~.css"는 함께 사용합니다.

"shCore~~~.css"라는 이름의 css파일은 "코어"와 "테마"의 내용을 결합시킨 파일이므로 하나만 가져 오면 OK.
(예를 들면 "shCore.css"와 "shThemeMidnight.css"을 함께 사용한 것과 "shCoreMidnight.css" 파일 하나만 사용한 결과물은 똑같다는 말입니다.)


이상으로 SyntaxHighlighter 3.0.83 설치와 사용방법을 마치겠습니다.
설치에 도움이 되셨다면 추천 꾹 눌러 주세요!!

+ 댓글은 큰 힘이 됩니다. 18