콘텐츠로 건너뛰기

소스코드 강조도구 SyntaxHighlighter 적용 및 설정 하는 법

소스코드 강조도구 SyntaxHighlighter 적용 및 설정 하는 법

블로그&인터넷/티스토리

2019-01-03 00:58:22


티스토리 블로그를 운영하면서 HTML, CSS 등 스킨에 개성을 주기 위해 편집을 하는 일이 많아지는데, 스킨을 편집하면서 생긴 노하우 등을 공유하고 싶을 때 소스코드를 <pre>나 <code>등으로 단순히 작성하다 보면 보는 이의 입장에서는 복잡하여 이해도가 떨어질 수도 있고 개별적으로 색상을 지정해줄 수도 있지만 여간 힘든 게 아닌데 이를 SyntaxHighlighter 도구를 이용하면 간편하게 해결이 가능합니다.


설치하기

<script type="text/javascript" src="https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shCore.js"></script>
<script type="text/javascript" src="https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushAS3.js"></script>
<script type="text/javascript" src="https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushBash.js"></script>
<script type="text/javascript" src="https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushDelphi.js"></script>
<script type="text/javascript" src="https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushDiff.js"></script>
<script type="text/javascript" src="https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushGroovy.js"></script>
<script type="text/javascript" src="https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushJava.js"></script>
<script type="text/javascript" src="https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushJavaFX.js"></script>
<script type="text/javascript" src="https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPerl.js"></script>
<script type="text/javascript" src="https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPowerShell.js"></script>
<script type="text/javascript" src="https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPython.js"></script>
<script type="text/javascript" src="https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushRuby.js"></script>
<script type="text/javascript" src="https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushScala.js"></script>
<script type="text/javascript" src="https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushVb.js"></script>
<script type="text/javascript" src="https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shLegacy.js"></script>
<link rel="stylesheet" type="text/css" href="https://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeDefault.css">	
<link rel="stylesheet" type="text/css" href="https://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shCore.css">
<script type="text/javascript">
	SyntaxHighlighter.all();
</script>

소스코드 하이라이트 기능은 호스팅을 제공하기 때문에 파일들을 다운로드하여 등록하는 불편함 없이 HTML 편집을 통해 <head></head>사이에 넣어주기만 하면 간단하게 적용이 가능합니다.

호스팅을 이용하지 않고 자신의 블로그에 파일들을 업로드 사용할 경우 연결 주소가 <script type=”text/javascript” src=”./images/shcore.js”></script> 와 같은 형태로 변경되어 적용할 수 있겠습니다.

<link rel="stylesheet" type="text/css" href="https://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeDefault.css">	
<link rel="stylesheet" type="text/css" href="https://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shCore.css">
<script type="text/javascript" src="https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shCore.js"></script>
<script type="text/javascript">SyntaxHighlighter.all();</script>

하이라이트를 적용하기 위해서는 필수적으로 위 4줄 정도가 <head>사이 들어가며 나머지 블러시 스크립트 들은 표현하고자 하는 형식에 맞추어 필요한것만 적용하여도 무방합니다.

<link rel="stylesheet" type="text/css" href="https://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeDefault.css">
DefaultshThemeDefault.css
DjangoshThemeDjango.css
EclipseshThemeEclipse.css
EmacsshThemeEmacs.css
Fade To GreyshThemeFadeToGrey.css
MidnightshThemeMidnight.css
RDarkshThemeRDark.css

테마의 경우에는 7가지 정도가 지원되며 스킨 디자인이나 개인적인 취향에 맞추어 적용이 가능합니다. 샘플 목록에 이름을 클릭하면 공식 사이트의 샘플을 확인 가능하며 <link rel=”stylesheet” type=”text/css” href=”https://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeDefault.css“> 파일 이름을 취향에 맞는 “shThemeRDark.css“등의 테마로 변경하여 적용하여 주면 테마가 변경됩니다.

Brush nameBrush aliasesFile name
ActionScript3as3, actionscript3shBrushAS3.js
Bash/shellbash, shellshBrushBash.js
ColdFusioncf, coldfusionshBrushColdFusion.js
C#c-sharp, csharpshBrushCSharp.js
C++cpp, cshBrushCpp.js
CSScssshBrushCss.js
Delphidelphi, pas, pascalshBrushDelphi.js
Diffdiff, patchshBrushDiff.js
Erlangerl, erlangshBrushErlang.js
GroovygroovyshBrushGroovy.js
JavaScriptjs, jscript, javascriptshBrushJScript.js
JavajavashBrushJava.js
JavaFXjfx, javafxshBrushJavaFX.js
Perlperl, plshBrushPerl.js
PHPphpshBrushPhp.js
Plain Textplain, textshBrushPlain.js
PowerShellps, powershellshBrushPowerShell.js
Pythonpy, pythonshBrushPython.js
Rubyrails, ror, rubyshBrushRuby.js
ScalascalashBrushScala.js
SQLsqlshBrushSql.js
Visual Basicvb, vbnetshBrushVb.js
XMLxml, xhtml, xslt, html, xhtmlshBrushXml.js

xml, html 코드를 작성할 때 헤드에 <script type=”text/javascript” src=”https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushXml.js”></script> 필요하고 <pre class=”brush: xml”>로 적용하여 표현할 수 있습니다. 적절한 브러시를 사용할 때 가독성이 많이 올라가게 됩니다.

설정하기 및 사용하기

<pre class="brush: xml">
표현하고 싶은 코드
</pre>

head 적용이 끝나면 본문에 적용하는 방법인데 적용 방식은<pre>태그를 이용하면 되는데 이때 class=brush:에 코드에 맞는 형식을 적용합니다.

<pre class="brush: plain; highlight: [1, 3]">
첫째 줄
둘째 줄
셋째 줄
</pre>

하이라이트 기능을 사용하면서 가독성을 위한 다양한 기능들을 추가하여 사용이 가능한데, 클래스에 highlight: [1,3]를 추가하여 사용이 1, 3번 줄에 배경을 추가하여 특정 라인을 강조할 수 있습니다.

<pre class="brush: xml" title"제목">
소스코드 제목 넣기
</pre>

tltle=”제목”으로 첫 줄 상단에 출력 라인과 별개로 제목 노출이 가능합니다.

<style>
.class_name { border-bottom: 3px solid #0100ff; }
.class_name2 { border-top: 2px solid #f40; }
</style>


<pre class="brush: xml; class-name: 'class_name class_name2'">
클래스 이름 부여 하기
</pre>

클래스를 추가하여 특성에 맞는 속성을 설정이 가능하며, 샘플처럼 클래스는 복수 생성하여 개별 속성을 부여할 수 있습니다.

<pre class="brush: xml; first-line: 10">
시작 번호 설정
</pre>

first-line: 10 설정으로 시작번호의 라인을 10과같이 설정하여 1번부터가 아닌 지정한 번호로 시작할 수가 있습니다.

<pre class="brush: xml; collapse: true">
기본 상태 접기 설정
</pre>

collapse: true 설정으로 소스코드가 펼쳐지지 않은 내용을 보여주지 않는 접은 상태로 노출 가능합니다. 툴바를 제거한 상태에서 접기를 하였를때 펼치기 버튼이 활성화되지 않음으로 collapse를 사용하기 위해서는 toolbar: true 상태이어야지만 펼치기 기능이 활성화됩니다.

<pre class="brush: xml; toolbar: false">
오른쪽 상단 툴바 제거
</pre>

toolbar: false 오른쪽 상단에 노출되는 물음표 모양의 정보 버튼을 숨깁니다.

<pre class="brush: xml; gutter: false">
넘버링 제거
</pre>

gutter: false 왼쪽에 노출되는 순번을 표기하지 않게 할 수 있니다.

<pre class="brush: xml; auto-links: false">
오토 링크 해제
</pre>

auto-links: false 코드에 웹주소가 있을 때 자동으로 링크가 생성되는데 이를 자동 생성되지 않도록 합니다.

<script type="text/javascript">
 SyntaxHighlighter.all();
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.defaults['toolbar'] = false;
 SyntaxHighlighter.defaults['auto-links'] = false;
</script>

각 옵션들은 소스코드를 사용할때마다 설정을 할 수 있지만, 등록해두고 사이트내에 모른 코드에 일괄적으로 적용이 가능합니다.

<style>
	.syntaxhighlighter { padding-bottom: 1px!important;	}
</style>

세로 스크롤이 생성되는 것을 padding 속성으로 방지할 수 있습니다.

http://alexgorbatchev.com/SyntaxHighlighter 사이트에서 설치, 설정, 테마 등 다양한 정보를 확인할 수 있습니다.

#블로그 #소스코드 #SyntaxHighlighter #pre

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다