specify 'other' code in liquid codeblocks as markup

[JaKXz]

No description provided.

[github-actions]

JS File Size Changes (gzipped)

A total of 1 files have changed, with a combined diff of +32 B (+5.7%).

file	master	pull	size diff	% diff
components/prism-liquid.min.js	564 B	596 B	+32 B	+5.7%

Generated by 🚫 dangerJS against 208830e

[RunDevelopment]

@JaKXz Could you please explain the issue this PR is solving and give an example?

[JaKXz]

Hey @RunDevelopment -- sorry for the empty description, thanks for the reply.

For the purposes of syntax highlighting I think we're happy to think of the "other" elements in a liquid codeblock as markup. I stole this code from twig since using language-twig works relatively well (better than language-liquid) for liquid codeblocks, e.g.

but the same codeblock with language-liquid does not highlight the "other" parts (in this example, the CSS) properly:

Happy to discuss further, please let me know what you think!

[RunDevelopment]

I see. In that case, Liquide deserves a bit of an overhaul.

Twig's approach with an other token can work but we have something better: Markup templating. With markup templating, we can even get template inside attributes, e.g. <a href="{{ url }}">link</a>.

Markup templating can be used like this:

components.json
@@ -731,6 +731,7 @@
                "liquid": {
                        "title": "Liquid",
+                       "require": "markup-templating",
                        "owner": "cinhtau"
                },

components/prism-liquid.js
@@ -1,4 +1,8 @@
 Prism.languages.liquid = {
+       'delimiter': {
+               pattern: /^\{(?:\{\{|[%\{])-?|-?(?:\}\}|[%\}])\}$/,
+               alias: 'punctuation'
+       },
        'keyword': /\b(?:comment|endcomment|if|elsif|else|endif|unless|endunless|for|endfor|case|endcase|when|in|break|assign|continue|limit|offset|range|reversed|raw|endraw|capture|endcapture|tablerow|endtablerow)\b/,
        'number': /\b0b[01]+\b|\b0x(?:\.[\da-fp-]+|[\da-f]+(?:\.[\da-fp-]+)?)\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?[df]?/i, 
        'operator': {
@@ -10,3 +14,12 @@ Prism.languages.liquid = {
                lookbehind: true
        }
 };
+
+Prism.hooks.add('before-tokenize', function (env) {
+       var liquidPattern = /\{(?:%[\s\S]*?%|\{\{[\s\S]*?\}\}|\{[\s\S]*?\})\}/g;
+       Prism.languages['markup-templating'].buildPlaceholders(env, 'liquid', liquidPattern);
+});
+
+Prism.hooks.add('after-tokenize', function (env) {
+       Prism.languages['markup-templating'].tokenizePlaceholders(env, 'liquid');
+});

This works okay:

However, this is only a quick draft I did in literally 5 minutes and I have never worked with Liquid before. This still needs testing, testing, and then some more testing.

Would you like to do this?

[JaKXz]

Whoa, that's pretty cool! I'd be happy to try that out and report back.

In the meantime, do you think we could merge this as a stopgap [and that would also give us a better control/baseline to compare against]? I'm not sure why CI is half-passing though... :\

[RunDevelopment]

do you think we could merge this as a stopgap

Sorry but I'm inclined to say no. The reason being, it doesn't work. Liquid highlights all < and > as operators, so no full HTML tags can be matched by other. Here's the example I used above highlighted using this branch:

I'm not sure why CI is half-passing though

Lint and tests pass. Liquid is poorly tested rn, so it's not surprising that they pass. The reason the CI fails is that you forgot to update the minified files. Just run npm ci && npm run build and commit all changes to update the build.

And yes, we commit the build...