초코볼의 inside Tech

지금까지 SyntaxHighlighter 를 사용하여, source code 들이 console 에서 보여지는 것 처럼 표현해 왔습니다.

* Software | TISTORY 에서 소스코드 보이기

- https://chocoball.tistory.com/entry/SoftwareTISTORYshowSourceCode

그런데, 제가 기존에 사용한 theme 가 default - 배경 흰색 이더군요.

Theme 을 바꿔 볼까 하던 중, SyntaxHighlighter 자체가 version up 이 되어 있다는 것을 알게 되었습니다.

3.0.83 > 4.0.1

원제작자 사이트는 아래와 같습니다.

* syntaxhighlighter/syntaxhighlighter

- https://github.com/syntaxhighlighter/syntaxhighlighter

작업 한김에 버전업을 진행해 봅니다.

1. 필요한 파일

필요한 파일은, 최신 공개된 파일을 가지고 Linux 나 OS X 머신에서 compile 하면 됩니다.

문제는 지금 제가 Linux / OS X 머신을 사용하고 있지 않습니다.

위의 웹사이트에 나와 있는 가이드 대로 컴파일 하면, 또한 즐겁겠으나,

그러질 못하니 필요한 파일을 여기저기 적용된 사이트에서 다운로드 하여 유용하기로 합니다.

- theme.css

- syntaxhighlighter.js

- syntaxhighlighter.js.map

Theme 는 배경이 검은색인 RDark 를 적용한 사이트를 찾아 다운로드 했습니다.

제가 다운로드 하여 이 블로그에 적용된 파일을 여기서 공유해 봅니다.

* syntaxhighlighter.zip

한가지 주의점은, 제가 직접 compile 을 하지 않아서 그런지, mobile 에서는 제대로 동작하지 않습니다.

나중에 Linux 머신 구하게 되면 그 때 해보겠습니다.

일단 위의 세개 파일을 아래 메뉴에서 업로드 합니다.

Tistory > 꾸미기 > 스킨편집 > Html 편집 > 파일업로드

파일이 올라간 위치를 잘 기억해 둡니다.

"images" 폴더에 올라갔네요.

이제 남은 것은, HTML 의 head 부분만 수정하면 됩니다.

2. 기존 설정 해제

저는 3.0.83 버전 설정과 파일이 올라가 있으므로, 그것을 해제해 줍니다.

처음 설치하시는 분은 이 부분을 건너 뛰면 되겠습니다.

가만 보니, 4.0.1 버전 설정과 겹치는 부분이 없으므로,

단순히 disable - comment out 해 놓고, 예전 버전의 파일도 걍 놔두기로 합니다.

혹시 나중에 모르잖아요.

우선 head 섹션에 설정되어 있던 관련 라인을 몽땅 comment out 시키구요.

body 끝부분에 설정해 놓은 javascript 부분도 주석처리 합니다.

한방에, 이쁘게 잘 되었네요.

3. 새로운 설정

4.0.1 버전은 단 3줄로 설정이 끝납니다. (아래는 가이드에 설명된 내용)

자세히 보면, 필요한 파일에 대한 구문이 javascript 와 link 로 정의되어 있습니다.

head 섹션에 위의 구문을 넣어 줍니다.

끝~!

4. 차이

Version up 도 했지만, 기본적으로 차이가 없으므로,

theme 변경에 따른 source code 표시 시, 배경이 아래처럼 바뀌었습니다.

흠흠, 의도한 대로 되었습니다!

5. 다른 옵션들

아래 링크의 가이드에도 나와 있지만, 자잘한 기능들도 있었네요.

* Configuration

- https://github.com/syntaxhighlighter/syntaxhighlighter/wiki/Configuration

* auto-links (Default true)

Allows you to turn detection of links in the highlighted element on and off. If the option is turned off, URLs won’t be clickable.

* class-name (Default null)

Allows you to add a custom class (or multiple classes) to every highlighter element that will be created on the page.

* first-line (Default 1)

Allows you to change the first (starting) line number.

* gutter (Default true)

Allows you to turn gutter with line numbers on and off.

* highlight (Default null)

Allows you to highlight one or more lines to focus user’s attention. When specifying as a parameter, you have to pass an array looking value, like [1, 2, 3] or just an number for a single line. If you are changing SyntaxHighlighter.defaults['highlight'], you can pass a number or an array of numbers.

* html-script (Default false)

Allows you to highlight a mixture of HTML/XML code and a script which is very common in web development. Setting this value to true requires that you have shBrushXml.js loaded and that the brush you are using supports this feature.

* smart-tabs (Default true)

Allows you to turn smart tabs feature on and off.

* tab-size (Default 4)

Allows you to adjust tab size.

위의 옵션들 중에서 제가 쓸만한 내용만 확인해 봤습니다.

6. first-line

라인 넘버링 시작 번호를 1번이 아니라 원하는 번호로 바꿀 수 있습니다.

<pre class="brush:cpp; first-line:5;">
#include "SoftwareSerial.h"
 
#define HC06_RXD 2
#define HC06_TXD 3
SoftwareSerial bluetooth(HC06_RXD, HC06_TXD);
 
void setup(){
  Serial.begin(9600);
  bluetooth.begin(9600);
}
</pre>

어디선가 발췌 한 듯한 효과를 줄 수 있으며, 정확한 라인 정보를 추가 설명 없이도 공유할 수 있습니다.

#include "SoftwareSerial.h"
 
#define HC06_RXD 2
#define HC06_TXD 3
SoftwareSerial bluetooth(HC06_RXD, HC06_TXD);
 
void setup(){
  Serial.begin(9600);
  bluetooth.begin(9600);
}

7. gutter

왼쪽에 표시되는 라인 번호를 없앨 수 있습니다.

<pre class="brush:cpp; gutter:false;">
#include "SoftwareSerial.h"
 
#define HC06_RXD 2
#define HC06_TXD 3
SoftwareSerial bluetooth(HC06_RXD, HC06_TXD);
 
void setup(){
  Serial.begin(9600);
  bluetooth.begin(9600);
}
</pre>

이렇게요.

#include "SoftwareSerial.h"
 
#define HC06_RXD 2
#define HC06_TXD 3
SoftwareSerial bluetooth(HC06_RXD, HC06_TXD);
 
void setup(){
  Serial.begin(9600);
  bluetooth.begin(9600);
}

8. highlight

강조하는 줄을 마킹할 수 있습니다.

<pre class="brush:cpp; highlight:3;">
#include "SoftwareSerial.h"
 
#define HC06_RXD 2
#define HC06_TXD 3
SoftwareSerial bluetooth(HC06_RXD, HC06_TXD);
 
void setup(){
  Serial.begin(9600);
  bluetooth.begin(9600);
}
</pre>

이렇게요.

#include "SoftwareSerial.h"
 
#define HC06_RXD 2
#define HC06_TXD 3
SoftwareSerial bluetooth(HC06_RXD, HC06_TXD);
 
void setup(){
  Serial.begin(9600);
  bluetooth.begin(9600);
}

복수의 줄을 한꺼번에 설정할 수 있습니다.

<pre class="brush:cpp; highlight:[4,7,8];">
#include "SoftwareSerial.h"
 
#define HC06_RXD 2
#define HC06_TXD 3
SoftwareSerial bluetooth(HC06_RXD, HC06_TXD);
 
void setup(){
  Serial.begin(9600);
  bluetooth.begin(9600);
}
</pre>

이것도 꽤 유용하겠네요.

#include "SoftwareSerial.h"
 
#define HC06_RXD 2
#define HC06_TXD 3
SoftwareSerial bluetooth(HC06_RXD, HC06_TXD);
 
void setup(){
  Serial.begin(9600);
  bluetooth.begin(9600);
}

9. tab-size

Tab 으로 띄어 쓰기가 되어 있으면, 기본 4칸을 띄우는데,

이 기본 4칸을 원하는 칸 수로 바꿀 수 있습니다.

<pre class="brush:cpp; tab-size:12;">
#include	"SoftwareSerial.h"
 
#define	HC06_RXD 2
#define	HC06_TXD 3
</pre>

만, 제대로 되지 않는군요.

#include	"SoftwareSerial.h"
 
#define	HC06_RXD	2
#define	HC06_TXD	3

아마 직접 compile 한게 아닌 파일을 사용하고 있어서 뭔가 맞지 않는지도 모르겠습니다.

자주 사용할 내용은 아니라 무시하기로 합니다.

FIN

나중에 시간 되면 Linux 에서 제대로 compile 해서 올려 놓겠습니다~

1. 시작하기

TISTORY 에는 source code 를 이쁘게 보여주는 모듈이 등록되어 있지 않습니다.

결국 HTML 을 어떤 식으로 보여줄 것이냐이기에, 여러 WIKI 나 site 에서 사용되는 "SyntaxHighlighter" 를 등록하면 될 것 같습니다.

방법은, "필요한 파일 다운로드 -> 동작해주는 CSS와 JS 를 등록 -> 소스에 입히기 -> 선언하여 사용" 의 순서가 될 것 같습니다.

2. 다운로드

아래 배포 사이트에서 최신버전을 받습니다.

http://alexgorbatchev.com/SyntaxHighlighter/download/

3. 설치

1) 관리자 > HTML/CSS 편집

2) 파일 업로드

scripts 및 styles 폴더 안에 있는 파일 모두를 업로드 합니다.

3) HTML 코드 수정

HTML 을 클릭하여 다음 코드들을 추가합니다.

<header> </header> 사이에 삽입.

실제 삽입 예.

맨 밑줄의 </body></html> 바로 위에 아래 코드 삽입.

실제 삽입 예.

4. 적용

소스는 편집기의 글이 아니라 HTML 소스로 입력을 해야 합니다.

외부컨텐츠 > HTML 로 입력합니다.

5. 참고

언어별로 다음과 같이 class 정의하면 됩니다.

각 언어별로 코드는 다음 표와 같습니다.

FIN

참 쉽죠 ?!!!