Home

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

티스토리 블로그를 운영하면서 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
ActionScript3 as3, actionscript3 shBrushAS3.js
Bash/shell bash, shell shBrushBash.js
ColdFusion cf, coldfusion shBrushColdFusion.js
C# c-sharp, 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

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 사이트에서 설치, 설정, 테마 등 다양한 정보를 확인할 수 있습니다.

more

댓글을 달아 주세요

.

Secret