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

Tags:

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