SyntaxHighlighter | SyntaxHighlighter 기본 | 언어에 따라 JS 파일과 테마 적용을 위한 CSS 파일

SyntaxHighlighter를 사용하기 위해서는 몇 가지 필요한 파일을 소스 코드를 작성하는 HTML 파일을 로드해야 한다. 여기에서 필요한 파일을 가져 오는 방법을 설명한다.  

JavaScript 파일 로드

JavaScript 파일은 필수적인 shCore.js 파일과 사용하는 프로그래밍 언어에 따라 JavaScript 파일을 로드한다. 어떤 언어의 때 어떤 파일을 읽어 어 와야 하는지 다음을 참조한다.

Brush name Brush aliases File name
ActionScript3 as3, actionscript3 shBrushAS3.js
Bash/shell bash, shell shBrushBash.js
ColdFusion cf, coldfusion shBrushColdFusion.js
C# csharp, csharp shBrushCSharp.js
C++ cpp, c shBrushCpp.js
CSS css shBrushCss.js
Delphi delphi, pas, pascal shBrushDelphi.js
Diff diff, patch shBrushDiff.js
Erlang erl, erlang shBrushErlang.js
Groovy groovy shBrushGroovy.js
JavaScript js, jscript, javascript shBrushJScript.js
Java java shBrushJava.js
JavaFX jfx, javafx shBrushJavaFX.js
Perl perl, pl shBrushPerl.js
PHP php shBrushPhp.js
Plain Text plain, text shBrushPlain.js
PowerShell ps, powershell shBrushPowerShell.js
Python py, python shBrushPython.js
Ruby rails, ror, ruby shBrushRuby.js
Scala scala shBrushScala.js
SQL sql shBrushSql.js
Visual Basic vb, vbnet shBrushVb.js
XML xml, xhtml, xslt, html, xhtml shBrushXml.js

예를 들면, PHP 소스 코드를 작성하는 경우 “shBrushPhp.js” 파일을 로드하고, HTML 소스 코드를 작성하는 경우에는 “shBrushXml.js” 파일을로드한다. 실제 작성 방법은 다음과 같다.

<script src="../scripts/shCore.js"></script>
<script src="../scripts/shBrushPhp.js"></script>

같은 HTML 파일에서 여러 언어의 소스 코드를 작성하는 경우에는, 필수 파일과 필요한 만큼의 JavaScript 파일을 로드한다. 다음은 HTML 소스 코드와 CSS 소스 코드를 작성하는 경우이다.

<script src="../scripts/shCore.js"></script>
<script src="../scripts/shBrushCss.js"></script>
<script src="../scripts/shBrushXml.js"></script>

로드 파일은 직접 사용되는 Web 서버에 업로드하거나 CDN 적용하여 이용한다.

CSS 파일 로드

CSS 파일은 필수적인 shCore.css 파일과 사용하는 테마에 따른 CSS 파일을 로드한다. 다운로드한 파일의 “script” 디렉터리에 포함된 파일을 보면 테마는 “Default”, “Django”, “Eclipse”, “Emacs”, “FadeToGrey”, “MDUltra”, “Midnight”, “RDark” 8가지 종류를 제공한다.

Theme name File name Core 포함
Default shThemeDefault.css shCoreDefault.css
Django shThemeDjango.css shCoreDjango.css
Eclipse shThemeEclipse.css shCoreEclipse.css
Emacs shThemeEmacs.css shCoreEmacs.css
FadeToGrey shThemeFadeToGrey.css shCoreFadeToGrey.css
MDUltra shThemeMDUltra.css shCoreMDUltra.css
Midnight shThemeMidnight.css shCoreMidnight.css
RDark shThemeRDark.css shCoreeRDark.css

CSS 파일은 “shCoreXXX.css"와 “shThemeXXX.css"의 2가지 형태의 파일이 있는데, “shCoreXXX .css " 파일은 필수인 “shCore.css"와 “shTheme XXX .css"를 합친 파일이다. 예를 들어, Default 테마를 적용하려면 shCore.css와 shThemeDefault.css 모두를 로드를 하거나 shCoreDefault.css 만 로드하면 된다.

여러 테마를 적용하여 전환을 하는 경우를 제외하고 “shCoreXXX .css” 파일을 하나 로드한다. 실제 적용 방법은 다음과 같다.

<link rel="stylesheet" href="../css/shCoreDefault.css"/>

CSS 파일도 가져올 파일은 직접 사용되는 Web 서버에 업로드하거나 CDN 적용하여 이용한다.

SyntaxHighlighter.all()의 실행

필요한 파일을 가져온 후에 SyntaxHighlighter.all()를 한 번 실행해야 한다.

<script type="text/javascript">
  SyntaxHighlighter.all();
</script>

다운로드한 파일에 포함된 HTML 샘플 코드를 보면, <head></head> 안에 넣었다.

필요한 작성 정리

JavaScript 파일과 CSS 파일을 로드하여 SyntaxHighlighter.all() 수행까지 작성하는 방법을 정리하면 다음과 같다.

<html>
<head>
  <script src="../scripts/shCore.js"></script>
  <script src="../scripts/shBrushPhp.js"></script>
  <link rel="stylesheet" href="../css/shCoreDefault.css" type="text/css" />
  <script type="text/javascript">
    SyntaxHighlighter.all();
  </script>
</head>
<body>
...
</body>
</html>

이제 준비는 완료되었다. 또한 각 파일의 경로는 업로드한 파일의 위치에 맞게 변경하여 사용한다.




최종 수정 : 2019-12-18