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 설치와 사용방법을 마치겠습니다.
설치에 도움이 되셨다면 추천 꾹 눌러 주세요!!

+ 댓글은 큰 힘이 됩니다.
  • default-image
    BlogIcon 살구w 2014.11.18 17:48 신고

    나머지는 다됬는데 사용방법에서 막히네여 ㅠㅠ 왜표시가안될까요?

    • default-image
      BlogIcon 블로마리 2014.11.18 19:39 신고

      잘 안되세요? 설치를 마쳤으면 사용방법을 다시 한번 읽어보시고, 예문 그대로 따라 해보세요,

  • default-image
    BlogIcon 93m 2015.01.09 11:11 신고

    좋은 정보 잘 봤습니다 :D.
    <pre name="code" class="brush:html">
    </pre>

    라고 태그를 잡아놓고 사이에 html 코드를 작성했는데 <!doctype html> 같은 태그는 없어지고 <meta> 태그만 살아서 표시되는 이유가 뭘까요..?

    &lt ,&gt 라고 표시를 안하고 < > 라고 표시를 해서 괄호가 안먹혀서 그런걸까요..?
    지식이 부족해서 그런지 java 같은 프로그래밍 언어는 잘되는데 html 같은게 먹히질 않네요..ㅠ

    • default-image
      BlogIcon 블로마리 2015.01.09 12:23 신고

      반갑습니다.
      <> 괄호를 변환해야 하는데 아마 변환을 안해줘서 그럴겁니다. 변환해서 다시 해 보세요.

  • default-image
    2015.04.22 18:39

    비밀댓글입니다

    • default-image
      BlogIcon 블로마리 2015.04.23 08:07 신고

      글을 쓸 당시에는 제 블로그에 신택스하이라이터가 설치되어 있었습니다만 다른 자바스크립트랑 자꾸 충돌을 일으켜서 구글의 "Prettify"로 바꾸었습니다. 따라서 현재 보고 계신 테마도 구글의 테마입니다.

      아래의 사이트에서 다운받아 사용하시면 됩니다.
      http://demo.stanleyhlng.com/prettify-js/?id=bootstrap-light

  • default-image
    BlogIcon Logger.info 2015.06.15 09:41 신고

    본문글 copy 안되여.... ㅠㅠ

  • default-image
    BlogIcon digSEC 2015.07.04 15:50 신고

    지금 사용하시는 문법강조는 먼가요?? 굉장히 이쁘네요 ㄷㄷ

    • default-image
      BlogIcon 블로마리 2015.07.04 16:00 신고

      바로 위에 있는 댓글을 읽어보세요.

      아래의 사이트에서 다운받아 사용하시면 됩니다.
      http://demo.stanleyhlng.com/prettify-js/?id=bootstrap-light

  • default-image
    BlogIcon sup3rn0v4 2015.07.04 20:23 신고

    감사합니다 :)!!!

  • default-image
    BlogIcon digSEC 2015.07.04 21:27 신고

    좋은 정보 감사합니다 그런데 사용하려하니 적용이 안되던데 기존 css파일 대신 사이트에서 다운받은 css를 적용하면 되는건가요 ??

    • default-image
      BlogIcon 블로마리 2015.07.04 23:19 신고

      지금 제 블로그는 SyntaxHighlighter(신택스하이라이터)가 아닌 "구글의 Prettify"가 설치되어 있습니다.
      설치와 사용법은 "구글의 Prettify"로 검색해서 배우세요. 간단합니다. 설치한 다음 예쁘다고 하신 테마는 제가 댓글에 남긴 사이트에서 다운받아 적용시키면 됩니다.

  • default-image
    BlogIcon 루아흐뉴마 2017.10.18 02:05 신고

    너무도 좋은 강좌 감사합니다.
    덕분에 잘 활용하고 있습니다.
    저는 처음에 MS Office의 VBA 코드를 사용하고 있어서 오류가 났었는데
    <pre class="brush:html"> 부분을 <pre class="brush:vb">로 고치니 정상 작동했습니다 ^^

  • default-image
    BlogIcon 블로마리 2017.10.18 12:58 신고

    도움이 되셨다니 저도 기쁘네요.
    계속해서 좋은 시간 되시길...

  • default-image
    BlogIcon 개발하냥 2018.03.30 11:05 신고

    저는 다 적용이되는데 왜 줄번호가 안나올까요ㅠ

    • default-image
      BlogIcon 블로마리 2018.03.30 11:23 신고

      아래처럼 해 보세요.
      <pre class="prettyprint linenums">내용</pre>

  • default-image
    BlogIcon 개발하냥 2018.03.30 14:57 신고

    잘해결되었습니다! 감사해요!