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의 기능을 알아보았습니다.





저작자표시 비영리

'UTILITIES > SyntaxHighlighter' 카테고리의 다른 글

SyntaxHighlighter v4 설치 방법 - Ubuntu  (1) 2018.07.19

+ Recent posts

티스토리툴바