Code in highlight shortcode rendered as markdown

[jmooring]

Code blocks are wrapped in pre tags.

Here’s another example from the CommonMark reference implementation.

Note the start conditions for HTML blocks:
https://spec.commonmark.org/0.31.2/#html-blocks

The CommonMark spec is complicated when it comes to mixing HTML with Markdown, and, at times, ambiguous.

[Joje]

[Disclaimer: I’m marking this as a solution, but I’d recommend finding another way to do this. I am not putting this solution in my own production code since I found a way to get around the nesting, but since that is not generally applicable, I’ll leave this here for shame and posterity.]

Huh, this is actually very interesting. If I abuse the HTML a bit by writing “inline pre tags” (yes, I know, but at this point this is just for fun and learning) in order to try to trick the renderer, CommonMark actually renders it as markdown, even though the HTML is displayed as a block. Seemingly, only adding pre tags isn’t enough to suppress rendering, it has to be on its own line.

Realizing this actually gave me the idea for a hack that seems to give me more or less the behavior I want. Proof-of-concept (or maybe more like evidence-of-guilt) pushed to the repo. Essentially, what I did was I created my own highlight shortcode (refactored the pyline shortcode from above) that wraps the output from transform.Highlight in <pre class='inline'> on a new line. Then I added CSS rules (in baseof.html for simplicity in the example) to set display: inline on pre.inline and pre.inline + p.

A general “solution” would be putting this in shortcodes/highlight.html:

<!-- note the empty line here -->
<pre class='inline'>{{ if len .Params | eq 2 }}{{ highlight (trim .InnerDeindent "\n\r") (.Get 0) (.Get 1) }}{{ else }}{{ highlight (trim .InnerDeindent "\n\r") (.Get 0) "" }}{{ end }}<pre>

And then in your CSS:

pre.inline,
pre.inline + p {
  display: inline;
}

Of course, this means that there might be strange behavior wrt whatever follows the paragraph following the <pre class='inline'> but throwing more CSS at the issue should be able to fix that if you absolutely need this functionality.