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.
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.
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.
Prism Syntax Highlighter
A plugin version of Prism.js.
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.
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.
I compared the effects of each plugin on the site display speed, so please refer to this as well.
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).
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.