Add syntax highlighting for all code snippets across all languages

[pastelcyborg]

The code snippet blocks used across the website should all be syntax highlighted for their appropriate languages. Right now, only snippets on certain pages are syntax highlighted, while others are not:

https://vanillaframework.io/docs/building-vanilla

There's probably an additional CSS theme or whatnot for our syntax highlighting lib that would add this functionality.

[syncronize-issues-to-jira[bot]]

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-14575.

This message was autogenerated

[jmuzina]

The example code snippets (support syntax highlighting for HTML, JS, CSS), because they use Prism to highlight their source (here's where we call it).

We could do this for pre code blocks throughout the rest of our documentation, but we'd have to find a way to intercept whatever process reads our markdown and turns it into markup, and call Prism there. Or, probably more simply, we could check for all pre code elements on our docs pages and run Prism on them.

[jmuzina]

Adding to my initial exploration:

Prism.highlightAllUnder, which is the function we call to highlight syntax, relies on the pre element having a class language-<language_identifier>, where language_identifier is some language in Prism's language set.

We set this ourselves for examples here. Coincidentally, it seems like Jinja is not a valid option here, which is why the macros in #5321 have no syntax highlighting.

It's a bit harder to apply to the whole site as we would have to set the language manually (or otherwise detect it), so we can add the class name accordingly.

I started with this as a brief exploration, and found that it doesn't highlight anything because the language class is not present.

(function () {
  function setupPreCodeHighlights() {
    if (!Prism) return;

    document.querySelectorAll('pre code').forEach(Prism.highlightAllUnder);
  }

  document.addEventListener('DOMContentLoaded', setupPreCodeHighlights)
})();

So, what we probably need is to either find a way to detect languages (which is probably full of errors and false identifications), or to manually set the language on all of our pre code blocks, inside the markup.

Edit: it's also possible that my example didn't work because I was calling highlight on "code" rather than "pre"