A SyntaxHighlighter Evolved WordPress plugin for Google Apps Script contributors

SyntaxHighlighter-GAS code editing and result

On the 10 March 2021 I’ll be celebrating 11 years of blogging about Google Apps Script. It all started with ‘Updating a Google Calendar and Google Site from a Google Spreadsheet’ and since I’ve published close to 200 posts on the topic.

As part of my published content I like to include useful code snippets. As I published on a self-hosted WordPress blog I’ve used plugins to help format the code to make it easier to understand and also aesthetically look nice.

Over the years I mostly used variants of plugins that have used the SyntaxHighlighter JavaScript package by Alex Gorbachev. This package has a number of ‘brushes’ for a long list of coding languages which provides online syntax highlighting that you get in most IDEs.. Given Apps Script is based on a JavaScript I’ve usually used this as the language identified for my code snippets.

This all changed when my preferred plugin, Syntax Highlighter Compress, started throwing errors when it was trying to render snippets. This plugin hasn’t been updated for 9 years and I imagine a core dependency has been removed from WordPress. Rather than trying to fix it I thought I would swap to SyntaxHighlighter Evolved, which is used also on wordpress.com.

As I was swapping out plugins I also had a look at extending it to support Google Apps Script services. This is something I had looked at in the past as a fudgy fix, but this time wanted to do it properly. The result is the SyntaxHighlighter-GAS plugin which extends SyntaxHighlighter Evolved to include a Google Apps Script brush and also a code theme based on the one you find on the Google Developers site.

The plugin repo has basic information on installation and once setup you too can have lovely rendered code like this (screenshot if you are reading via RSS):

/** @OnlyCurrentDoc */
function sendMap() {
  var sheet = SpreadsheetApp.getActiveSheet();
  var address = sheet.getRange('A1').getValue();
  var map = Maps.newStaticMap().addMarker(address);
  GmailApp.sendEmail('YOUR_EMAIL', 'Map', 'See below.', {attachments:[map]});
}

Putting this plugin together was relatively easy thanks to a post from the plugins author Alex Mills on adding new brushes and this one on including new themes. Feel free to report issues/fixes. Happy scripting!

2 Comments


  1. This is good to know. I used for a long time one called Crayon Syntax Highlighter, which I liked because there were no special shortcodes, it just applied to code in html “pre” tags. It went belly up a few months ago (like a WP thing) but I found a forked version that kep my old code blocks going.

    It would be great to see one that dealt well with blocks, I find as well converted code from classic to block editor escapes tags (it might calm Tony H down a bit too)


    1. I was fortunate that the original one had a similar mechanism of using <pre class="brush:[lang]"> , which I can still use without modifying posts if I use the ‘Load All Brushes’ option. Not tested if ‘Load all Brushes’ would detect a language if brush isn’t set. The block editor version with SyntaxHighlighter Evolved inserts pre tags which gives me some comfort if I need to swap in the future. The SyntaxHighlighter Evolved code has some hooks and well structured code so you might want to play at some point :)

Comments are closed, but trackbacks and pingbacks are open.