계기
IT 관련 글을 작성하려다 보면 많은 경우, Command Line 이나 Source Code 를 붙여 넣는 일이 다반사입니다. Markdown 문법을 따르는 편집기라면 단일 역따옴표 </code>나 삼중 역따옴표 <code class="EnlighterJSRAW" data-enlighter-language="null">
Crayon Syntax Highlighter
Wordpress 설치할 때 부터 지금까지 사용하던 Plugin 입니다. 가장 많은 사용자 추천이 있습니다. 간단하게 사용하고 싶은데 반해서 지원하는 기능이 상당히 많습니다. 처음 사용자에게는 설정하는 것도 일입니다. 다만, 아쉽다고 합다면 더 이상 개발 유지 보수가 안된다는 점입니다. 마지막 버전이 3년 전에 나왔고, 최신 WordPress 5.x 공식 지원하지 않습니다.
장점: 다양한 기능 설정
단점: 개발 중지
다운로드: https://wordpress.org/plugins/crayon-syntax-highlighter/
Enlighter – Customizable Syntax Highlighter
WordPress 5.x 지원하기 때문에 Gutenberg 편집기와 잘 동작합니다. Gutenberg 편집기 기능은 아직 Beta 라고 명시하고 있습니다. 언뜻 보면 설정이 많아 보이지만 실제로는 기본 값으로 바로 사용 가능합니다. Gutenberg 에서 사용할 때, 추가할 블럭 양식에서 “Enlighter Sourcecode 추가” 를 선택하면 됩니다. 아래 예제 그림에서 보듯이 긴 줄은 자동 줄바꿈도 제공해 줍니다. 오른쪽에 있는 아이콘을 누르면 Raw 상태 보기가 가능합니다. Raw 상태에서 ‘복사 > 붙여넣기’ 가능합니다.
장점:
- 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 방식으로 사용해야만 하는 것은 불편한 점입니다.
장점:
- 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 행들을 “강조” 표시 할 수 있습니다.
장점: 설정 창을 이용한 간편한 설정
단점: 너무 기능이 없음.
다운로드: https://wordpress.org/plugins/syntaxhighlighter/
맺음말
실제로 원하는 기능을 정리해 보면 다음과 같습니다.
- Line Number ( On / Off )
- 자동 줄바꿈 ( On / Off )
- Source code 자동 복사 ( On / Off )
단순해 보이는 기능이지만 Source code 자동 복사 기능은 없었습니다. Crayon 이 개발 지원이 되었으면 좋겠지만 개발 중지라서 대안을 찾을 수 밖에 없고, 이번 비교를 통해서 당분간 Enlighter 를 사용하기로 결정했습니다. Plugin 교체를 하면 기존에 작성한 부분은 어찌 되나 걱정이 되었지만 Preformatted 블록으로 자동 변경이 이루어졌습니다. 안심하고 Plugin 을 교체할 수 있다는 것을 확인한 셈입니다.
