I like to blog about technical topics and part of this involves providing code snippets with an explanation and further exploration about those code snippets.
When readers are reading a page on my blog I would like any code snippets that are on a page to be formatted with syntax highlighting as per the following image:
The WordPress Gutenberg editor provides a code block which will be used to output HTML tags which are typically used to hold a code snippet.
The problem is that the HTML code block does not have any specific formatting and will require changes to be made to the contents of the code block in order to display with syntax highlighting. The changes are to identify key words in a code snippet and then put tags around those keywords with a specific class applied to each. This can be done fairly easily with a regular expression search applied across a small block of code.
I made a decision that I would use a code library to implement this functionality rather than write my own library. I decided to use the Code Prettify library from the Google archives in GitHub. I haven’t used this library before but according to the readme on the github page for code-prettify it is used to power https://code.google.com/ and http://stackoverflow.com/ which is encouraging.
The code-prettify library can be found here:
https://github.com/googlearchive/code-prettify
And to use the library once it is installed on a page what I need to do is to put a class=”prettyprint” on the pre or code tags on my page:
Now typically you would do this I guess in the functions.php file by providing a content hook and I am thinking in the future I might do this. But for the moment I am applying this functionality through a global search and replace in my client side react code.
function formatPost(post) {
const rendered = post.content.rendered;
let result = rendered.replace(/\<code\>/g, '<code class="prettyprint">');
const parsed = parse(result);
return parsed;
}
As you can see from the code snippet (hopefully highlighted) above the logic to apply syntax highlighting has now shrunk down to a single line regular expression. The content for each post is returned inside a post.content.rendered string when retrieved via the REST API. So what the formatPost function will do is take that string and apply any client side formatting before the contents of the post are rendered on the page. I should also mention that I am using a react library to convert the post.content.rendered string into a react object for rendering on the page. This library is the react-html-parser.
https://www.npmjs.com/package/react-html-parser
The above code of course will only run if I have included a link to the code-prettify library on my HTML page. For WordPress sites this is typically done using the wp_enqueue_script function call. My first call when linking to a third party library now is to use a CDN. I find that this is a stable and fast way to bring libraries in and also means you should be on a later version.
According to the instructions on the git hub page for code-prettify I need to include a script tag in my document as follows:
Because I am using a WordPress theme I use the following code inside the script_loader_tag hook to add the run_prettify.js file on each page as a linked Javascript library.
wp_enqueue_script( 'code-prettify', 'https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js' );
Finally if you are more of a content creator than a developer then you may want to link to a plugin to achieve the above functionality. I have found this Code Prettify plugin on the WordPress plugins directory which uses the code-prettify library and might help you if you would like syntax highlighting on your site.
Top comments (0)