SyntaxHighlighter는 프로그램 소스를 좀 더 예쁘게 보여지도록 꾸며주는 효과가 있는 플러그인과 같습니다.
SyntaxHighlighter는 또한 현재까지 사용되고 있는 버전인 3.x와 현재 새로 만들어진 버전 4.x로 구분되어 있습니다.
여기서는 버전 3과 4의 메뉴얼의 구분이 없기 때문에, 한 번에 작성하였습니다.
단, 버전 4는 smart-tabs, toolbar, collapse가 제대로 동작하지 않습니다.
toolbar는 현재 버전 4에서는 아예 삭제되었습니다.
01. SyntaxHighlighter 명령어 요약
SyntaxHighlighter의 기본 명령어에 대한 설명을 시작으로 각각 하나씩 설명해보려 합니다.
일단 기본 명령어들은 다음과 같습니다.
이름
|
값
|
설명
|
auto-links |
true
|
URL을 클릭할 수 있도록 해주는 옵션입니다.
켜고 끌 수 있으며 기본으로 true(클릭시 URL로 이동)이 설정되어있습니다.
|
class-name |
' '
|
페이지에 생성될 모든 Highlighter 요소에 사용자 정의 클래스(혹은 여러 클래스)를 추가할 수 있습니다.
|
collapse |
false |
SyntaxHighlighter로 작성된 부분의 영역을 접었다 펴는 기능입니다.
기본적으로 접혀있지 않은 형태로 제공됩니다.
|
first-line |
1 |
첫 번째 시작 라인 번호를 지정해주는 것입니다.
기본적으로 1로 지정되어있습니다.
|
gutter |
true |
줄 번호를 켜고 끄는 기능을 사용하는 것입니다.
기본적으로 켜져 있습니다.
|
highlight |
null |
어떠한 행의 번호를 선택하여 강조해주는 기능입니다.
기본적으로 번호가 지정되지 않아 꺼져있는 상태입니다.
|
html-script |
false |
HTML / XML 코드와 웹 개발에서 매우 공통적인 스크립트를 혼합하여 강조 표시를 할 수 있습니다. |
smart-tabs |
true |
스마트 탭 기능을 켜고 끌 수 있습니다.
|
tab-size |
4 |
탭(tab)의 사이즈를 지정해줍니다.
기본적으로 4로 되어있습니다.
|
toolbar |
true |
툴바 기능을 On/Off 해주는 기능입니다.
|
각각의 명령어에 대한 설명은 예제와 함께 작성해보도록 하겠습니다.
여기서 Source는 여러분께서 티스토리 혹은 워드프레스에 HTML로 작성할 소스를 말합니다.
여기서 Result는 여러분께서 티스토리 혹은 워드프레스에 Source를 작성했을 때 보여지는 결과로 나오는 것을 말합니다.
02. SyntaxHighlighter - auto-links
auto-links는 여러분께서 작성한 코드에 URL이 있을 경우, 그 URL에 클릭을 했을 시에 그 링크로 들어가지는 기능을 말합니다.
기본적으로 true 값으로 설정되어있으며, 이는 기본적으로 링크를 클릭했을 때 그 링크로 들어가지게끔 해준다는 의미입니다.
이제 예제를 보도록 하겠습니다.
Source
<pre class="brush: php; auto-links: false">
/** https://kkamikoon.tistory.com */
'https://kkamikoon.tistory.com'
</pre>
Result
/** https://kkamikoon.tistory.com */
'https://kkamikoon.tistory.com'
해당 예제에서는 auto-links를 false로 지정해주었습니다.
즉, 링크처럼 보이는 주소를 클릭해도 해당 주소로 들어가지지 않습니다.
하지만, Source에 있는 주소는 클릭이 되는 것을 볼 수 있습니다.
03. SyntaxHighlighter - class-name
class-name은 페이지에 생성될 모든 Highlighter 요소에 사용자 정의 클래스(혹은 여러 클래스)를 추가할 수 있습니다.
즉 여러분께서 임의로 만들어낸 클래스를 SyntaxHighlighter 박스에 적용할 수 있다는 의미입니다.
기본으로는 ' ' 라고 되어있는데, 이는 작성된 클래스가 없이 SyntaxHighlighter가 적용된다는 것입니다.
만약 여기에 여러분이 정의할 새로운 클래스를 작성한다면, 모든 박스에 적용됩니다.
이제 예제를 보도록 하겠습니다.
Source
<style>
.class_name_demo { border: 5px solid #000; }
</style>
<pre class="brush: php; class-name: 'class_name_demo'">
/** https://kkamikoon.tistory.com */
'https://kkamikoon.tistory.com'
</pre>
Result
/** https://kkamikoon.tistory.com */
'https://kkamikoon.tistory.com'
예제의 Result를 확인해보시면 5px의 크기의 선들이 박스를 감싸고 있는 것을 볼 수 있습니다.
이는 우리가 만든 class_name_demo의 기능이 SyntaxHighlighter에 적용된 것을 볼 수 있습니다.
이 기능을 활용하여 여러분께서는 각각의 SyntaxHighlighter가 적용된 곳에 여러분의 임의의 클래스를 적용할 수 있습니다.
04. SyntaxHighlighter - collapse
collapse는 SyntaxHighlighter로 작성된 부분의 영역을 접었다 펴는 기능입니다.
이는 티스토리나 다른 워드프레스 및 블로그에서 자체적으로 접는 기능이 없더라도, 접을 수 있도록 도와주는 역할을 합니다.
기본적으로는 접히지 않은 형태로 출력되도록 false가 적용되어있습니다.
이제 예제를 보도록 합시다.
Source
<pre class="brush: php; collapse: true">
Hello kkamikoon's world!
This is collapsed code!!
If you clicked 'expand source', you can see this.
</pre>
Result
Hello kkamikoon's world!
This is collapsed code!!
If you clicked 'expand source', you can see this.
위의 Result를 살펴보시면 결과가 나타나지 않는 것을 볼 수 있습니다.
원래는 expand source라는 클릭 버튼이 있고, 이를 클릭하면 펼쳐지는 형태이지만, 제대로 동작하지 않는 것 같습니다.
현재 제가 사용하고 있는 버전은 SyntaxHighlighter v4이며, v3과 차이가 있습니다.
05. SyntaxHighlighter - first-line
first-line은 SyntaxHighlighter를 이용하여 작성한 소스소크드 줄번호의 시작번호를 지정해주는 기능입니다.
기본적으로 시작 번호는 1로 지정되어있습니다.
바로 예제를 보도록 합시다.
Source
<pre class="brush: php; first-line: 10">
this is now tenth line,
and this is eleventh!
</pre>
Result
this is now tenth line,
and this is eleventh!
여기서 Result의 결과를 살펴보면, 첫 번째 줄 번호가 10인 것을 볼 수 있습니다.
즉, 우리가 지정한 first-line에 10을 지정해주었기 때문에, 시작 번호가 10으로 변경되는 것입니다.
여기서 여러분께서는 소스코드의 시작 번호를 따로 지정해줄 수 있습니다.
06. SyntaxHighlighter - gutter
gutter는 줄 번호를 켜고 끄는 기능입니다.
기본적으로는 줄 번호가 표시되도록 설정되어있지만, 사용자가 임의로 설정을 끌 수 있습니다.
예제를 보도록 합시다.
Source
<pre class="brush: php; gutter: false;">
/** https://kkamikoon.tistory.com *.
'https://kkamikoon.tistory.com'
</pre>
Result
/** https://kkamikoon.tistory.com *.
'https://kkamikoon.tistory.com'
위의 Result를 확인하시면, 줄 번호가 사라진 것을 확인할 수 있습니다.
이제 기본 소스코드를 수정하여 모든 소스코드의 줄 번호를 삭제해줄 수도 있고, 줄 번호를 SyntaxHighlighter가 적용되는 곳마다 다르게 설정해줄 수도 있게됩니다.
07. SyntaxHighlighter - highlight
highlight는 어떠한 행의 번호를 선택하여 특정한 부분을 강조해주는 기능입니다.
기본적으로는 모든 영역이 강조되지 않은 상태로 설정되어있지만, 이 기능을 이용하면 특정 행의 번호를 강조해줄 수 있습니다.
이제 예제를 보도록 합시다.
Source
<pre class="brush: php; highlight: 2">
line No.1
line No.2
line No.3
</pre>
<pre class="brush: php; highlight: [1, 3]">
line No.1
line No.2
line No.3
</pre>
Result
line No.1
line No.2
line No.3
line No.1
line No.2
line No.3
위의 Result를 볼 때 첫 번째 예제는 줄 번호 2번을 강조하였고, 두 번째 예제는 줄 번호 1, 3번을 강조하였습니다.
즉, 줄을 하나 뿐만 아니라 여러 개의 줄 번호를 강조해줄 수 있다는 것입니다.
이 기능을 통해 설명하고자 하는 영역을 강조해보는 건 어떨까 합니다.
08. SyntaxHighlighter - html-script
html-script는 HTML / XML 코드와 웹 개발에서 매우 공통적인 스크립트를 혼합하여 강조 표시를 할 수 있는 기능입니다.
이는 예제를 통해 설명하도록 하겠습니다.
Source
<pre class="brush: php; html-script: true">
<html>
<body>
<div style="font-weight: bold"><?= str_replace("\n", "<br/>", $var) ?></div>
<?
/***********************************
** Multiline block comments
**********************************/
$stringWithUrl = "http://alexgorbatchev.com";
$stringWithUrl = 'http://alexgorbatchev.com';
ob_start("parseOutputBuffer"); // Start Code Buffering
session_start();
?>
</body>
</html>
</pre>
Result
html-script: true
<html>
<body>
<div style="font-weight: bold"><?= str_replace("\n", "<br/>", $var) ?></div>
<?
/***********************************
** Multiline block comments
**********************************/
$stringWithUrl = "http://alexgorbatchev.com";
$stringWithUrl = 'http://alexgorbatchev.com';
ob_start("parseOutputBuffer"); // Start Code Buffering
session_start();
?>
</body>
</html>
html-script: false
<html>
<body>
<div style="font-weight: bold"><?= str_replace("\n", "<br/>", $var) ?></div>
<?
/***********************************
** Multiline block comments
**********************************/
$stringWithUrl = "http://alexgorbatchev.com";
$stringWithUrl = 'http://alexgorbatchev.com';
ob_start("parseOutputBuffer"); // Start Code Buffering
session_start();
?>
</body>
</html>
위의 Result는 true일 때와 false일 때를 구분하여 작성해보았습니다.
true일 때와 false일 때의 차이는 눈썰미가 좋으신 분은 바로 보였을 것입니다.
html-script를 true적용을 했을 때 구문이 마치 좀 더 웹 소스코드처럼 보이도록 강조해주는 효과가 있는 것을 볼 수 있습니다.
만약 웹 소스코드를 작성하실 때 php로 작성하더라도 소스코드가 이쁘지 않다면, html-script를 true로 해보면 좋을 것 같습니다.
09. SyntaxHighlighter - smart-tabs
smart-tabs는 스마트 탭을 On/Off를 적용하는 기능입니다.
이는 예제를 통해 설명하도록 하겠습니다.
Source
smart-tabs: true
<pre class="brush: php; smart-tabs: true">
hello there! ya!
hello ya!
</pre>
smart-tabs: false
<pre class="brush: php; smart-tabs: false">
hello there! ya!
hello ya!
</pre>
Result
smart-tabs: true
hello there! ya!
hello ya!
smart-tabs: false
hello there! ya!
hello ya!
위의 Result를 보시면 별 차이점을 볼 수 없습니다. 기본적으로 대부분 smart-tabs을 요즘 지원하고 있는 형태이기 때문입니다.
여러분은 아마 SyntaxHighlighter에서 smart-tabs를 false로 끌 일이 없으실 것입니다.
어쩌면 꺼도 효과가 안 나타날 수 있습니다.
10. SyntaxHighlighter - tab-size
tab-size는 탭의 크기를 지정해주는 기능입니다.
tab-size는 기본적으로 띄어쓰기 4개 즉, 4로 지정되어있습니다.
예제를 보도록 합시다.
Source
tab-size: 4
<pre class="brush: js; tab-size: 4">
123 123 123
1 2 3
</pre>
tab-size: 8
<pre class="brush: js; tab-size: 8">
123 123 123
1 2 3
</pre>
Result
tab-size: 4
123 123 123
1 2 3
tab-size: 8
123 123 123
1 2 3
11. SyntaxHighlighter - toolbar
toolbar는 툴바 기능을 On/Off해주는 기능입니다.
이 기능은 사실상 사용하지 않은 기능인 것 같습니다.
눈에 띄는 효과가 없어 보입니다.
여기까지 해서 SyntaxHighlighter의 기능을 알아보았습니다.
