Handling markdown in codeblock hook

[githubds]

Hi. I’m trying to migrate a small pandoc-based site generation setup to Hugo due to growing pains. I want all of my HTML code blocks to be figures with captions. So I set up this render hook for HTML code blocks:

<!-- render-codeblock-html.html -->
<figure class="code">
  {{ transform.Highlight .Inner "html" }} {{ if .Attributes.caption }}
  <figcaption>{{ .Attributes.caption }}</figcaption>
  {{ end }}
</figure>

Now if I have Markdown like this (backticks are whitespace-separated for rendering properly in discourse)…

` ` `HTML { caption="Listing 3: Code for an Image Embed element with a `width` attribute, pointing to a raster graphic" }
<img
  src="resources/lesson6-3.png"
  alt="Photo of two bananas on a white background"
  width="128"
>
` ` `

It displays the banana photo from above but downsizes it to 128x128 pixels.

…the rendering is completely broken…

I can get it to work by using <code> tags around width and then piping the attribute through markdownify ({{ .Attributes.caption }} | markdownify). But then I’m writing HTML in my captions again and not Markdown. Can anyone tell me how I can write Markdown in my captions and still have them rendered correctly?

[jmooring]

The behavior is expected per the CommonMark specification. See:
https://spec.commonmark.org/0.30/#fenced-code-blocks

The line with the opening code fence may optionally contain some text following the code fence; this is trimmed of leading and trailing spaces or tabs and called the info string. If the info string comes after a backtick fence, it may not contain any backtick characters. (The reason for this restriction is that otherwise some inline code would be incorrectly interpreted as the beginning of a fenced code block.)

Use tildes instead…

~~~text {title="a `b` c"}
foo
~~~