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 [liquid][/liquid]
and you’re all set. Like so:

 

[liquid] 
-- Liquid code goes here -- 
[/liquid]

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.

Get Notified of Updates

If you use this pre-pre-alpha experimental version, please leave a comment and check the box to receive email updates for replies. When I make fixes (and ultimately put it on Github or WP.org), I’ll add a comment so you get updated. I know, that’s the lamest update system ever, but until I get organized that’s all there is.

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>