Syntax Highlighting for Liquid

,

I wanted to publish a blog post today about using Shopify menus to drive hierarchical breadcrumbs. Then I realized that, as near as I can tell, there is nobody who has a syntax highlighter for Liquid, the templating language that Shopify uses. So I created one. This is an pre-pre-alpha experimental plugin, but it’s working just fine on the page I linked above. I already see that the keyword “in” (used in for loops) is missing from my highlighter file.

Installation

To use it, you need to first install the Syntax Highlighter Evolved plugin. All I’ve done is add a “brush” that hooks into that plugin.

Once that’s running, just download and install my plugin: Syntax Highlighter Liquid Brush. At some point I’ll put it on Github and WP.org, but I actually lost my WP.org login and the recovery email is no longer valid… so I need to create a new profile.

Usage

Very simple. Using the text editor (not tested with the visual editor), simply wrap your liquid code in the shortcode


and you’re all set. Like so:

 
-- Liquid code goes here -- 

There’s no need to add “pre” or “code” tags, convert anything to HTML entities or anything. Just paste your code from your code editor into WordPress between the shortcodes and away you go. Again, you can see it in action here.

One thing to note. Syntax Highlighter Evolved is not the lightest weight syntax highlighter, but one nice thing is that it doesn’t load any Javascript or CSS unless you are actually highlighting something on the page. So while the plugin has to parse the page for shortcodes, if it doesn’t find any, it leaves the page untouched.

Issues

If you use Autoptimize or any other plugin that minifies your Javascript, it will break Syntax Highlighter Evolved. That’s just a problem with the base library. You must exclude the base library and this brush from any minification otherwise bad things will happen (like your page will never load).

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>