티스토리 블로그를 운영하면서 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">
Default | shThemeDefault.css |
Django | shThemeDjango.css |
Eclipse | shThemeEclipse.css |
Emacs | shThemeEmacs.css |
Fade To Grey | shThemeFadeToGrey.css |
Midnight | shThemeMidnight.css |
RDark | shThemeRDark.css |
테마의 경우에는 7가지 정도가 지원되며 스킨 디자인이나 개인적인 취향에 맞추어 적용이 가능합니다. 샘플 목록에 이름을 클릭하면 공식 사이트의 샘플을 확인 가능하며 <link rel=”stylesheet” type=”text/css” href=”https://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeDefault.css“> 파일 이름을 취향에 맞는 “shThemeRDark.css“등의 테마로 변경하여 적용하여 주면 테마가 변경됩니다.
Brush name | Brush aliases | File 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 사이트에서 설치, 설정, 테마 등 다양한 정보를 확인할 수 있습니다.