계기

  IT 관련 글을 작성하려다 보면 많은 경우, Command Line 이나 Source Code 를 붙여 넣는 일이 다반사입니다. Markdown 문법을 따르는 편집기라면 단일 역따옴표 </code>나 삼중 역따옴표 <code class="EnlighterJSRAW" data-enlighter-language="null">을 사용하면 되고,  WordPress 는 편집기 메뉴 중 “<>” 를 이용하면 단순한 색상의 블럭 안에 표시를 할 수 있습니다. 하지만, 좀 더 예쁘게 보이고 싶은 욕구가 있다면 프로그램 언어별로 예쁘게 Source code 를 보여 줄 수 있습니다. 대부분의 개발자가 사용하는 편집기에서는 기본으로 제공하는 기능이기도 합니다. WordPress 에서 Syntax Highlight 기능을 사용하기 위한 Plugin 에는 종류가 상당히 많습니다. 이 중에서 인지도가 있다고 생각하는 WordPress Syntax Highlighter 4종을 간단 비교해 보았습니다.


Crayon Syntax Highlighter

 Wordpress 설치할 때 부터 지금까지 사용하던 Plugin 입니다. 가장 많은 사용자 추천이 있습니다. 간단하게 사용하고 싶은데 반해서 지원하는 기능이 상당히 많습니다. 처음 사용자에게는 설정하는 것도 일입니다. 다만, 아쉽다고 합다면 더 이상 개발 유지 보수가 안된다는 점입니다. 마지막 버전이 3년 전에 나왔고, 최신 WordPress 5.x 공식 지원하지 않습니다. 

AD

crayon syntax highlighter

장점: 다양한 기능 설정

단점: 개발 중지

다운로드https://wordpress.org/plugins/crayon-syntax-highlighter/


Enlighter – Customizable Syntax Highlighter

  WordPress 5.x 지원하기 때문에 Gutenberg 편집기와 잘 동작합니다. Gutenberg 편집기 기능은 아직 Beta 라고 명시하고 있습니다. 언뜻 보면 설정이 많아 보이지만 실제로는 기본 값으로 바로 사용 가능합니다. Gutenberg 에서 사용할 때, 추가할 블럭 양식에서 “Enlighter Sourcecode 추가”  를 선택하면 됩니다. 아래 예제 그림에서 보듯이 긴 줄은 자동 줄바꿈도 제공해 줍니다. 오른쪽에 있는 아이콘을 누르면 Raw 상태 보기가 가능합니다. Raw 상태에서 ‘복사 > 붙여넣기’ 가능합니다.

syntax highlighter

장점:

  • Gutenberg 편집기 지원
  • 간단한 사용법
  • 본문 외에 댓글란에서도 사용 가능

단점: 딱히 모르겠음.

다운로드https://wordpress.org/plugins/enlighter/

 


Prismatic

구글링을 해 보면 Prism.js 를 이용한 Plugin 이 상당히 많이 있음을 발견 할 수 있는데 그 중의 하나입니다. Prism.js 는 상당히 많은 기능 확장 Plugin 을 가지고 있는 Syntax Highlighting 도구로서 이를 WordPress 에서 사용 가능하도록 한 것입니다.  Prism.js 외에도 Highlight.js, Plain Flavor 도 지원하는 3-in-1 Plugin 입니다. 기본은 Prism.js 로 설정해 보았는데 Line number 가 없네요. 🙁 자동 줄바꿈도 안되는군요. 아마도 이런 기능을 기존 Prism.js plugin 이용할 수 있는 방법이 있을지 모르겠는데 발견하지는 못했습니다. 

사용법도 Visual 하지 않고, Source Code 만들 듯이 <pre><code> 등 TAG 방식으로 사용해야만 하는 것은 불편한 점입니다.

syntax highlighter

장점:

  • Gutenberg 편집기 지원.
  • Highlight.js, Plain Flavor 도 선택 가능함.
  • Prism.js 기반의 Syntax Hightlighter 로서 Prism.js 기능을 동일하게 제공. 

단점:

  • Line Number, 자동 줄바꿈 같은 기본적인 기능 제공 안함. (사용법을 모를지도…)
  • <pre><code> 등 TAG 직접 입력 방식 사용

다운로드https://wordpress.org/plugins/prismatic/#installation


SyntaxHighlighter Evolved

Gutenberg 편집기 지원합니다. 오른쪽 블럭 설정 영역에서 간편 설정 가능합니다. 그렇지만, 그것으로 끝! 더 이상의 설정은 없습니다. 자동 줄바꿈도 안됩니다. 다만, 복수의 Source Code 행들을 “강조” 표시 할 수 있습니다.

syntax highlighter

장점: 설정 창을 이용한 간편한 설정

단점: 너무 기능이 없음.

다운로드https://wordpress.org/plugins/syntaxhighlighter/

 


맺음말

실제로 원하는 기능을 정리해 보면 다음과 같습니다.

  • Line Number ( On / Off )
  • 자동 줄바꿈 ( On / Off )
  • Source code 자동 복사 ( On / Off )

단순해 보이는 기능이지만 Source code 자동 복사 기능은 없었습니다. Crayon 이 개발 지원이 되었으면 좋겠지만 개발 중지라서 대안을 찾을 수 밖에 없고, 이번 비교를 통해서 당분간 Enlighter 를 사용하기로 결정했습니다. Plugin 교체를 하면 기존에 작성한 부분은 어찌 되나 걱정이 되었지만 Preformatted 블록으로 자동 변경이 이루어졌습니다. 안심하고 Plugin 을 교체할 수 있다는 것을 확인한 셈입니다.

AD