WordPress에서 소스 코드를 붙여 표시하는 Highlighter 목록
프로그래밍계의 기사를 쓰고 있어 소스 코드를 소개할 때 코드를 보기 쉽게 표시할 수 있는 기능, Highlighter를 갖고 싶습니다.실제로 어느 것을 사용하면 좋은지 헤매는 정도로 많이 개발되고 있습니다.본 기사에서는 WordPress에서 소스 코드를 하이라이트 표시시키는 툴과 각각의 특징에 대해 라이브러리형, 플러그인형, 웹 서비스의 나누어 소개합니다.
라이브러리 유형
취득한 라이브러리 파일을 아이 테마 폴더에 업로드해 사용하는 타입의 Highlighter.플러그인에 비해 가볍지만, 조금 도입에 시간이 걸린다.
하이라이트.js
Highlight.js라는 JavaScript 라이브러리. 189개 프로그래밍 언어를 지원하며 89종의 표시 스타일이 있다(2018년 11월 시점).기능은 코드를 강조 표시하고 간단합니다.매우 가볍습니다.인기.
프리즘.js
이쪽도 경량의 JavaScript 라이브러리.대응 언어는 153개로, 표시 style는 8종(2018년 11월 시점).확장 기능으로서 간편하게, 행 번호나 지정한 행의 강조 표시, 사용 언어 표시, 카피 버튼 설치등을 추가할 수 있다.이쪽도 인기.
Google code-prettify
이름 그대로 google 개발의 JavaScript 라이브러리. C, Python, HTML, CSS, JavaScript, Makefile 등 주요 프로그래밍 언어에 대응하고 있지만, 사소한 언어는 확장 기능으로 대응할 필요가 있다.표시 style은 5종(2018년 11월 시점).위 2종과 같은 WordPress 폴더에 업로드하여 사용하는 방법 외에 오토로더를 사용하여 쉽게 설치하는 방법이 있다.사용자가 별로 없는지 일본어 정보는 적다.
https://github.com/google/code-prettify
플러그인형
WordPress의 무료 플러그인으로 배포되는 유형.도입이 매우 쉽고 취급하기 쉽지만 다른 유형에 비해 사이트가 약간 무거워질 가능성이 있습니다.라이브러리형에서는 필요한 언어만에 대응하도록 선택할 수 있습니다만, 플러그인판에서는 전언어・전기능이 갖추어져 있는 이미지입니다.
WP Code Highlight.js
라이브러리형으로 소개한 Highlight.js의 플러그인판입니다. SyntaxHighlighter, Prettify, CrayonSyntaxHighlighter와 호환되므로 다른 하이라이터에서도 마이그레이션 가능.
https://ja.wordpress.org/plugins/wp-code-highlightjs/
Prism Syntax Highlighter
Prism.js의 플러그인 버전.
https://ja.wordpress.org/plugins/ank-prism-for-wp/
Code Prettify
마찬가지로.
https://ja.wordpress.org/plugins/code-prettify/
Crayon Syntax Highlighter
사용자가 많이 일본어의 개설 정보도 풍부한 인상.초보자라도 간단하게 폰트 사이즈나 디자인의 변경하거나, 행 번호의 부여나 강조 표시등을 지정할 수 있어 커스터마이즈성이 매우 높다.무거운 소문이 많아 최종 갱신이 2015년 이후 멈추고 있는 것이 우려점.
https://ja.wordpress.org/plugins/crayon-syntax-highlighter/
Mivhak Syntax Highlighter
130어 이상의 프로그래밍 언어 대응, 테마도 36종류로 틀림없다.경량화된 CSS와 JS로부터, 언어 스크립트와 테마가 요구에 따라 로드되는 것 같지만 Crayon Syntax Highlighter와 같이 무거운 것 같은 느낌.코드의 부분만 폰트 사이즈 지정할 수 있다.
https://ja.wordpress.org/plugins/mivhak/
각각 플러그인의 사이트 표시 속도에의 영향을 비교해 보았으므로, 이쪽도 참고 받으면
Syntax Highlighter계 플러그인의 사이트 표시 속도 비교
웹 서비스 유형
웹에서 소스 코드를 임베디드 태그로 변환하고 태그를 Wordpress의 텍스트 편집기에 붙여 넣음으로써 강조 표시 할 수있는 유형의 Highlighter입니다.
Gist (GitHub 서비스)
Gist는 GitHub의 코드 공유 서비스입니다. Gist에 코드를 upload하면 표시용 태그가 출력된다. GitHub에 등록해야 하지만 반대로 GitHub 측에서 코드를 편집 관리할 수 있는 것이 장점(텍스트 편집기로 편집하면야등의 태그를 괴롭히는 것이 다소 어렵다).
https://gist.github.com/discover
srctohtml
등록 불필요하고 쉽게 코드를 임베디드 HTML 태그로 변환할 수 있다.대응 언어가 JavaScript, C++, PHP와 약간 적습니다.
http://marginalsoft.com/tools/srctohtml/
어느 것을 선택해야합니까?
무엇을 중시하고 싶은지에 따라 어떤 툴을 사용할지가 결정된다고 합니다.간단하게 각각의 방향 불향을 정리했으므로 참고로 해 주시면.그리고는 하이라이트시의 디자인은 신경이 쓰여 있는지도 중요하네요.
| 라이브러리 유형 | 어쨌든 동작의 가벼움·표시 속도를 중시 |
| 플러그인형 | 도입의 간편함 중시 (플러그인에 따라서는 거기까지 무겁지도 않다) |
| 웹 서비스 유형 | 코드 관리 기능에 매력을 느끼는 사람, GitHub 등록 (Gist) 너무 묻을 기회가 적은 사람 (srctohtml) |
그건 그렇고, 나는 Mivhak Syntax Highlighter 플러그인을 사용하고 있습니다.코드 부분만 글꼴 크기를 지정할 수 있고, 각종 버튼 설정을 간단한 설정 화면에서 조작할 수 있는 점이 좋습니다.모바일에서 속도가 떨어집니다만 코드를 참고로 하는 사람은 PC로부터 하고, 거기까지 문제가 아닐까 생각합니다.