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.
If you are running Autoptimize or any other plugin that does additional minification, see my notes at the end. Syntax Highlighter Evolved does not take kindly to additional minification.
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
As a Gutenberg block
In the new Gutenberg editor, this is super easy. Just click the + sign as usual to add a new block and choose “Syntax Highlighter Code.”
Then look in the Block Settings in the right sidebar, and choose “liquid” from the Code Language dropdown. Then just start writing Liquid code or paste some in.
You also have an option for starting the line numbers at an offset. Say you want to excerpt just lines 21-25 from a file, you can show just those lines, but numbered 21-25 to make it easier for your reader to find them in the source file.
You can also highlight particular lines as needed. So let’s say I want to show an “if” statement, but emphasize the third line.
For example, let’s say that in my breadcrumb based on menu structure code, I want to show lines 11-18 and highlight line 15 to show how it works for a collection, I could do this:
{%- if template contains 'product' -%}
{%- capture product_url_string -%}{%- for collection in product.collections -%}{{collection.url }}|{%- endfor -%}{%- endcapture -%}
{%- assign object_url_string = product_url_string | append: product.url -%}
{%- elsif template contains 'collection' and collection.handle -%}
{%- capture object_url_string -%}/collections/{{ collection.handle }}{%- endcapture -%}
{%- elsif template contains 'page' -%}
{%- capture object_url_string -%}/pages/{{ page.url }}{%- endcapture -%}
{% endif %}
Using a shortcode
I can also do this with the text editor using shortcodes, but it’s less convenient.
- Add <pre></pre> tags to preserve linebreaks and indents.
- Add <code></code> tags nested inside the <pre> tags to get nice colors
- Add the [[liquid]][[/liquid]] shortcode within the <code> tags to highlight liquid keywords.
Like so:
<pre>
<code>
[[liquid]]
-- Liquid code goes here --
[[/liquid]]
</code>
>/pre>
Even so, you lose some of the nice functionality you get with the Gutenberg editor, but it’s still pretty nice. Again, you can see it in action here.
Performance
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 — Minification
If you use the excellent Autoptimize plugin or any other plugin that attempts to further minify your Javascript, it will break Syntax Highlighter Evolved. That’s just a problem with the base library for SHE, as explained by Alex Mills, maintainer of SHE.
You must exclude the base library and this brush from any minification otherwise bad things will happen (like your page will never load). Fortunately, Frank Goossens, the maintainer of Autoptimize has added a setting to help with this as of Autoptimize 2.5.
In Autoptimize, there are two steps to this.
First, in the Javascript Options, find the field “Exclude scripts from Autoptimize” and add these three scripts to the comma-separated list:
shBrushLiquid.js,shBrushLiquid.min.js,syntaxhighligher.js
You might think you’re all set. But all this does is stop AO from aggregating the scripts, but it still minifies and, therefore, breaks your page. It will actually never load.
So you have one more step. All the way at the bottom, look under Misc Options. Uncheck “Minify excluded CSS and JS files?” This will do exactly as it says — the files in your exclude list will no longer get additional minification and your page will no longer crash. You get most of the optimization benefits and none of the instability.
Special thanks to Frank Goossens for adding this option to Autoptimize 2.5.