Since I have included a code snippet of more than twenty lines in my last article, it seems that it is now time to get some proper syntax highlighting.
After a short survey, and by excluding the plugins that are no longer maintained and the plugins that obviously does not satisfy my use case, I have the following real options:.
Enlighter
Enlighter uses enlighter.js to do job. It supports a merely small number of programming languages, though one could argue that in modern era one does not really need COBOL or Ada support. But who knows? I am still keen on trying APL, for example…
The plugin also comes with lots of themes and a customizer. However, the customizer does not actually allow me to completely change everything I want.
One of the most attractive feature Enlighter provides is inline code. In my last few posts, I used lots of inline code snippets. And not only syntax highlighting for inline code is useful, but having a consistent background color and other theme details is also useful.
Enlighter also has decent editor support, which means that I have a GUI to access all available options. It also has Gutenberg support. While I do not have immediate plan for converting to Gutenberg, knowing that this plugin can survive the Gutenberg apocalypse feels good.
Enlighter produces cryptic class names so writing my own color scheme will be difficult.
WP-GeSHi-Highlight
WP-GeSHi-Highlight is built upon GeSHi, a venerable PHP syntax highlighting library. In Mandarin Chinese, the word “geshi” means formatting, which leads me to think that GeSHi was a Chinese project, which is not true.
Anyway, the plugin is lightweight. It has absolutely no features other than getting the syntax highlighting thing done. But on the plus side, it is really professional in doing the one thing well: it supports 240 languages!
When it comes to theming, it lacks a bit. The problem is that the color class names produced by GeSHi are hardly semantic. What exactly is "re0" or "br1"?
Simple Code Block
The Simple Code Block is a “block”, and thus supposedly works only for Gutenberg. But this is build upon Ace, which is an editor instead of a syntax highlighter. Technically this could allow more awesome things such as having real WYSIWYG experience and even code completion.
It is worth asking that why such feature matter though. While I post code from time to time, I do not find debugging code in my WordPress editor pleasing. And whether it is the TinyMCE editor or the Gutenberg one obviously does not matter.
Prism Syntax Highlighter
Prism Syntax Highlighter is based on prism.js, which provides a huge array of customization options, supports a huge list of languages, and produces semantic class names allowing easily changing the color theme.
It sounds all good, until I realize that it is already abandoned… And some local testing shows that it sometimes fails to create the needed .js and .css files. It is already messy, and will probably be even messier in the future.
Summary
| Option | Maintained? | Languages | Semantic class Names | Engine Location | Inline Style | Tags |
|---|---|---|---|---|---|---|
| Enlighter | Yes | Few | No | Javascript (client) | Yes | <pre> |
| GeSHi | Yes | Many | No | PHP (server) | No | <pre> |
| Ace | Yes | Many | Yes | Javascript (client) | No | Block Only |
| Prism | No | Many | Yes | Javascript (client) | Yes | <pre><code> |
Am I stuck…?
All of the options have advantages and disadvantages. So what exactly should I pick…?
Among them, Prism is actually the most competitive one. However, we do not have a well-maintained and functioning Prism-based WordPress plugin.
However, a visit to the official website reveals that it is quite easy to produce my customized copy of Prism. The only remaining problem is to include the .js and .css files to my WordPress website. The existing plugin does this, but it is already shaky.
The safest bet seems to be writing a simple plugin that inserts the static files to my website. It turned to be quite easy too.
<?php
/*
* Plugin Name: Prism for De finibus
* Description: Add a customized subset of Prism to my page
* Version: 1.0
* Author: Yi Yang
* Author URI: https://blog.ahyangyi.org
*/
wp_enqueue_style("prism", plugin_dir_url( __FILE__ ) . "/" . "prism.css");
wp_enqueue_script("prism", plugin_dir_url( __FILE__ ) . "/" . "prism.js");
?>
And the above also serves as a demo that my plugin indeed works.
The plugin is now maintained in a GitHub repo.
Since now I decide to go down the route of baking my own plugin, it is also natural that I forked prism to further customize my theme.
Conclusion
For customization-rich applications, the difficulty in getting it work for myself can be vastly lower than getting it work for everyone. Hence, it is possible that no good plugin is available, but creating one for one’s own usage is very easy.
I believe that prism.js fits the above description, and hence my justification in doing my own plugin.
Since the plugin is super simple (just two function calls), I expect it to live long even if I do not update it at all. So hopefully this will not add much to the maintenance difficulty.