[SyntexHighlighter]CDN 서비스를 통해 SyntaxHighlighter 설치하기

기존에 쓰던 소스코드 구문강조 자바스크립트 라이브러리인 highlight.js 사용하다가 대세(?)를 따르고자SyntaxHighlighter 로 변경하는 작업을 진행했다. 워낙에 많은 사람들이 쓰는 라이브러리인지라 사용법도 구글로 검색하면 쉽게 나와 설치에 지장은 없어 보인다. 그런데 대부분의 다른 블로그에선 모두 SyntaxHighlighter 에서 소스를 직접 다운로드받아 사용하는 방법만 명시되어 있어 그 외 다른 방법인 CDN 서비스를 통한 적용방식을 남기고자 한다.

먼저 기존 적용방법에 대해선 http://jb-story.tistory.com/13 을 통해 확인할 수 있다.
(그 밖에 다른 블로그에서도 정리된 내용이 있으나 해당 블로그의 설명이 잘 되어 있어 여기만 올렸다.)

 기존 적용방법 과정에서 1, 2 단계인 소스 다운로드 및 티스토리에 업로드 부분은 제외하고 3번 과정을 아래와 같이 수정하여 적용한다.
(맨 첫째줄인 <!-- SyntaxHighlighter CDN "http://ko.cdnjs.com/libraries/syntaxhighlighter" --> 는 주석문이므로 제외하고 그 다음 줄부터 복사하여 붙여넣어도 된다.)

<!-- SyntaxHighlighter CDN "http://ko.cdnjs.com/libraries/syntaxhighlighter" -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreRDark.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushAS3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushAppleScript.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushBash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCSharp.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushColdFusion.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCpp.min.js"></script>
<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/shBrushDelphi.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushDiff.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushErlang.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushGroovy.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/shBrushJava.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJavaFX.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPhp.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPlain.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPowerShell.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPython.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushRuby.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushSass.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushScala.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushSql.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushVb.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shAutoloader.min.js"></script>
<script type="text/javascript">SyntaxHighlighter.all();</script>

 

이것으로 끝. 적용방법은 동일하나, 버전문제인지 아니면 놓친 부분이 있는지 PRE 태그만 된다.
그 외 다른 테마를 적용하고 싶다면 https://cdnjs.com/libraries/SyntaxHighlighter 에서 shCoreRDark 가 아닌 다른shCore{테마명}를 찾아 적용하면 된다.
(2017.05.21 수정 : http://ko.cdnjs.com/libraries/syntaxhighlighter 는 더이상 운영되지 않는다.)

Note 1. CDN 사이트에 가보면 링크중에 shCore.css, shTheme{테마명}.css 가 있는데, 이를 하나로 합친것이 shCore{테마명}이다. 따라서 shCore.css와 shTheme는 적용할 필요가 없다.

Note 2. CDN 사이트에 가보면 링크중에 동일한 파일명에.min 이 추가로 붙어 있고 없고의 차이가 있다. min이 이 있는것은 띄어쓰기나 줄바꿈등을 제거하여 용량을 줄인 경량화된 파일을 의미한다. 소스 분석이 목적이 아니라면 가급적 min이 붙어있는 파일을 사용하는게 좋다.