Syntax highlighting <pre> blocks

[unexpectedpanda]

Howdy!

I feel daft asking, but after a lot of searching and experimenting I still haven't turned up the answer. How do I turn on syntax highlighting for HTML <pre> blocks like the following?

<pre>
  <code>
  {
    "this_should": "be_highlighted_json"
  }
  </code>
</pre>

Why pre instead of Markdown code fences?

I'd like to add links to code blocks, with the aim of linking specific code symbols to their definitions further down the page.

Adding links to Markdown fences (syntax highlighted through SuperFences) seems to not be a thing, even when attempting to cheat the rendering pipeline order with various Jinja2 incantations.

So it looks like I need to revert to good old HTML <pre> to achieve my goal — but then I lose syntax highlighting, despite my attempts at jamming various different classes into the <pre> and <code> tags to get it to work.

[facelessuser]

If that is the route you want to go, a postprocessor that scans the finished HTML for blocks you want to process would be the easier route. The alternative would be to use fenced code and then postprocess for things you want to linkify.

Now, if you are asking if there is already a canned package that can do that and honor your links and such 🤷🏻. You may have to look into that.

[unexpectedpanda]

Ah, so I couldn't find the answer because the support doesn't exist out of the box for syntax highlighted <pre> blocks . I had wondered if that might be the case.

Thanks for the very rapid response, I'll see what I can come up with :)

[facelessuser]

There are JavaScript highlighters out there, but Material supports highlighting via Pygments during document generation. You could turn it off and use something like Highlight.js or Prism.js. I don't know how they play with links or if they have features that can add them, but something you could look into.