Highlighter list to paste / display source code in WordPress

2018/11/24

When writing a programming article and introducing the source code, I want Highlighter, a function that can display the code in an easy-to-read manner.In fact, it has been developed so much that it is hard to decide which one to use.In this article, we will introduce the tools for highlighting the source code in WordPress and their features separately for library type, plugin type, and web service.

Library type

Highlighter of the type to upload the acquired library file to the child theme folder and use it.It's lighter than a plugin, but it takes a little time to install.

Highlight.js

A JavaScript library called Highlight.js. It supports 189 programming languages ​​and has 89 display styles (as of November 2018).The function is as simple as highlighting the code.Very light.Popular.

https://highlightjs.org/

Prism.js

This is also a lightweight JavaScript library.It supports 153 languages ​​and 8 display styles (as of November 2018).As an extension, you can easily add line numbers, highlighting of specified lines, language display, copy button installation, etc.This is also popular.

https://prismjs.com/

Google code-prettify

As the name implies, a JavaScript library developed by google. It supports major programming languages ​​such as C, Python, HTML, CSS, JavaScript, Makefile, but minor languages ​​need to be supported by extensions.There are 5 display styles (as of November 2018).In addition to the method of uploading to a WordPress folder like the above two types and using it, there is a method of easily installing it using an autoloader.There are few Japanese information because there are not many users.

https://github.com/google/code-prettify

Plug-in type

A type distributed as a free WordPress plugin.It's very easy to deploy and manage, but it can make your site a little heavier than other types.In the library type, you can select to support only the required language, but in the plug-in version, it is an image with all languages ​​and all functions.

WP Code Highlight.js

It is a plug-in version of Highlight.js introduced in the library type. Compatible with SyntaxHighlighter, Prettify and CrayonSyntaxHighlighter, so you can migrate from other highlighters as well.

https://ja.wordpress.org/plugins/wp-code-highlightjs/

Prism Syntax Highlighter

A plugin version of Prism.js.

https://ja.wordpress.org/plugins/ank-prism-for-wp/

Code Prettify

Same.

https://ja.wordpress.org/plugins/code-prettify/

Crayon Syntax Highlighter

Impression that there are many users and abundant information on opening in Japanese.Even beginners can easily change the font size and design, add line numbers, highlight, etc., and it is very customizable.There are many reviews that it is heavy, and it is a concern that the last update has stopped since 2015.

https://ja.wordpress.org/plugins/crayon-syntax-highlighter/

Mivhak Syntax Highlighter

It supports more than 130 programming languages ​​and has 36 themes.It seems that language scripts and themes are loaded on demand from the lightweight CSS and JS, but it seems to be as heavy as Crayon Syntax Highlighter.You can specify the font size only for the code part.

https://ja.wordpress.org/plugins/mivhak/

 

I compared the effects of each plugin on the site display speed, so please refer to this as well.

Site display speed comparison of Syntax Highlighter plugins

 

 

Web service type

It is a type of Highlighter that can be highlighted by converting the source code into a tag for embedding on the Web and pasting the tag into a Wordpress text editor.

Gist (GitHub service)

Gist is a code sharing service on GitHub. When you upload the code to Gist, the tag for display is output. It is necessary to register with GitHub, but on the contrary, the advantage is that you can edit and manage the code on the GitHub side (editing with a text editor,OrIt is complicated to mess with tags such as).

https://gist.github.com/discover

srctohtml

You can easily convert the code to HTML tags for embedding without registration.Supported languages ​​are JavaScript, C ++, PHP and a little less.

http://marginalsoft.com/tools/srctohtml/

Which one to choose

It is also said that which tool to use depends on what you want to emphasize.I have briefly summarized the orientations of each, so please refer to them.It's also important whether you care about the design at the time of highlighting.

Library type Emphasis is placed on lightness of operation and display speed
Plug-in type Emphasis on ease of introduction
(Some plugins don't get that heavy)
Web service type GitHub registered (Gist), who is fascinated by the code management function
People who have few opportunities to embed (srctohtml)

By the way, I use the Mivhak Syntax Highlighter plugin.It is good that you can specify the font size only for the code part and you can operate various button settings on a simple setting screen.It slows down on mobile, but the person who refers to the code is probably from the PC, and I think that's the problem.