How to customize HTML generation to add an attribute? (My code examples come out backwards)

[dogweather]

I’d like Hugo to add the dir="ltr" attribute to <pre> elements when generating them.

Here’s what I get when a Markdown code-fence block is on a page with a right-to-left language. I’m relying on Hugo’s built-in multi-language feature, which is great. This is the only issue I’ve found. Adding the dir attribute would fix it:

It’s a pretty funny result. I wonder if it compiles.

I’ve found the Goldmark attribute support, which I can manually add to the markdown.

Is there, though, a hook to do this automatically?

[frjo]

You can construct a custom layouts/_default/_markup/render-codeblock.html

See transform.HighlightCodeBlock | Hugo and Markdown render hooks | Hugo

But a CSS solution is a lot easier. Adding this should solve the issue.

.highlight {
  direction: ltr;
}

[chrillek]

Wow. I didn’t know that direction is a CSS attribute. Thanks!