SyntaxHighlighter | SyntaxHighlighter 기본 | 공개 서버에 업로드된 JavaScript, CSS파일 (CDN)
SyntaxHighlighter의 공식 사이트에서 제공하는 공개 서버에 업로드된 JavaScript 파일이나 CSS 파일을 로드하여 사용하는 방법에 대해 설명한다. 무료 블로그 서비스 등을 사용하여 서버에 필요한 파일을 업로드를 할 수 없는 경우에 사용할 수 있다.
공개 서버에 업로드된 JavaScript 파일이나 CSS 파일 사용 절차
버전마다 필요한 파일이 업로드되어 있다. 다음은 버전마다의 목록이다. 최신 버전을 적용하고 싶은 경우에는 “current"를 사용한다.
http://alexgorbatchev.com/pub/sh/1.5.1/
http://alexgorbatchev.com/pub/sh/2.0.278/
http://alexgorbatchev.com/pub/sh/2.0.287/
http://alexgorbatchev.com/pub/sh/2.0.296/
http://alexgorbatchev.com/pub/sh/2.0.320/
http://alexgorbatchev.com/pub/sh/2.1.364/
http://alexgorbatchev.com/pub/sh/2.1.364/
http://alexgorbatchev.com/pub/sh/2.1.382/
http://alexgorbatchev.com/pub/sh/current/
예를 들어, “current"에 들어있는 JavaScript 파일이나 CSS 파일은 다음과 같이 지정한다. JavaScript 파일은 “scripts"디렉터리에 있고, CSS 파일은 “styles” 디렉터리에 들어 있다.
http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js
http://alexgorbatchev.com/pub/sh/current/styles/shCoreDefault.css
이 파일을 HTML 페이지에서 로드하려면 오려면 다음과 같이 작성한다.
<html>
<head>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js"></script>
<link rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shCoreDefault.css" type="text/css" />
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
</head>
<body>
...
<body>
</html>
이렇게 업로드된 파일을 사용하여 파일을 서버에 업로드할 수 없는 환경에서도 SyntaxHighlighter를 이용할 수 있다.
CDN을 이용하여 로드하는 방법
공개 서버에 업로드된 파일을 이용하는 방법 외에 CDN을 이용하는 방법도 있다.
CDN(Content Delivery Network)이란? 웹 사이트의 접속자가 서버에서 콘텐츠를 다운받아야 할 때, 자동으로 가장 가까운 서버에서 다운받도록 하는 기술이다. 이 기술을 이용하면 특정 서버에 트래픽이 집중되지 않고, 콘텐츠 전송 시간이 매우 빨라지는 장점이 있다.
CDN을 이용하면 SyntaxHighlighter 파일을 서버에 따로 업로드하지 않아도 SyntaxHighlighter를 사용할 수 있다. 현재 이용할 수 있는 SyntaxHighlighter 3.0.84 버전의 CDN은 다음과 같다.
CDNJS
https://cdnjs.com/libraries/SyntaxHighlighter
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.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/shAutoloader.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/shBrushPerl.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>
그럼 다음 페이지에서 실제 사용법에 대해 설명하겠다.
참고
https://alexgorbatchev.com/SyntaxHighlighter/hosting.html
최종 수정 : 2019-12-18