2014.09.03 10:43

티스토리 블로그에 소스코드 넣기 #1 Syntax Highlighter

티스토리 블로그를 사용하다 보면 소스 코드를 올려야 할 경우가 종종 발생한다. 코드야 첨부 파일로 업로드 하는 경우도 있지만, 블로그 내용에 포함 시키려면 어지간하지 귀찮아진다.

간략하게는 Courier 계열의 Font만 사용하기도 하지만 이쁘게 보이지도 않고, 결국에는 별도 Editor 화면을 캡쳐해서 첨부하기도 하는데 그것도 이미지로 첨부하는 거라 꽤 귀찮은 일이다.


다른 블로그에서는 어떻게 제공하는가 봤더니 꽤 다양한 방법을 제시하고 있었고 그 중 다음 두 가지로 압축되었다.


1. HightlightJS - https://highlightjs.org

- 장점 : 깔끔한 UI, CDN 배포, Apple Swift 지원

- 단점 : Line Number 표시하려면 별도 Branch에서 받아야 함


2. Syntax Highlighter - http://alexgorbatchev.com/SyntaxHighlighter

- 장점 : Line Number 표시, 다양한 설정

- 단점 : 기본 Theme 구림, CDN 없음 (홈페이지에서 배포하고 있으나 PoC용임)


일단, 사용법은 둘 다 비슷하지만, 일단은 Syntax Highligter를 먼저 선택해 보았다.


<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />

<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>

<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js" type="text/javascript"></script>


그리고 body의 제일 마지막 부분에 다음과 같은 코드를 추가한다.


<script type="text/javascript">

SyntaxHighlighter.defaults.toolbar = false;

SyntaxHighlighter.all()

</script>


다음은 필요한 Hightlight를 할 Brush를 추가해야하는데 현재 버젼 (3.0.83)에서 지원하는 Brush 종류는 꽤 다양하다. 일단은 JavaScript만 먼저 테스트를 해 보자.


JavaScript에 대한 Brush는 shBrushJScript.js 이므로 다음과 같이 추가한다.

<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"></script> 


다른 언어에 대한 Brush는 다음 링크를 참고 한다.


http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/


Sample Code는 <pre><code>로 담으면 자동으로 언어를 인식한다. 만약 제대로 동작하지 않는다면 <code> 태그에 class attribute로 해당 코드의 언어 이름을 넣어준다. 예를 들면 다음과 같다.


<pre class="brush: js;">

var a = 100;

function test() {

   return 'Hello, World'

}

</pre>


그러면 아래와 같이 라인 번호와 함께 나온다.

참고로, 3.0.83 버젼에는 swift에 대한 Brush가 빠져 있다. 


다음 글을 참고하여 Brush를 하나 마련해 보자.


http://wordpress.org/plugins/syntaxhighlighter-evolved-swift-brush/


기본적인 작성 방법은 다른 Brush 처럼 해당 언어에서 사용하는 주석이나 keyword에 대한 부분을 별도로 묶고 해당 부분을 어떤 색으로 보여줄 지에 대한 구성으로 되어 있다. Swift의 경우 Language Spec에 각종 정보들이 들어 있으며 다음과 같이 Brush에서 사용할 keyword 들을 정리했다.


1. datatypes

Character Bool Double Float

Int Int8 Int16 Int32 Int64

UInt UInt8 UInt16 UInt32 UInt64

AnyObject String Void


2. keywords

IBAction IBOutlet true false nil

super self Self copy

as break case class

continue convenience dynamic final private

default get set willSet didSet

else enum if is in infix internal for fallthrough func import inout

let lazy mutable

naked namespace new noinline noreturn nothrow NSCopying NSManaged mutating objc override operator optional prefix protocol

private public required return

static struct switch

T typealias UnsafePointer var

unowned weak where while


3. functions

advance enumerate find filter join

min map max print println sizeof sort init


shBrushSwift.js

Trackback 0 Comment 0