In RTL mode, code blocks aren't rendered correctly

[MoshiBin]

Language

Hebrew

What's the issue?

There are two issues with code blocks on RTL languages.

1. The code block is marked as RTL. In RTL languages (e.g. Hebrew, Arabic, Farsi) we write code in LTR.
2. The code block does not grow to fill the prose line length.

Here's how it should look like:

To solve the RTL code block issue, I've added a new file layouts/_default/_markup/render-codeblock.html that adds a wrapper div that forces the attribute dir="ltr":

{{ $lang  := .Attributes.lang  | default .Type }}
{{ if transform.CanHighlight $lang }}
<div dir="ltr">{{ highlight .Inner $lang }}</div>
{{else}}
<pre dir="ltr"><code>{{.Inner}}</code></pre>
{{end}}

To make the code block grow to the size of the content, I updated layouts\_default\single.html and added the Tailwind class grow to the content:

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 03e9a9e..873a9e2 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -19,7 +19,7 @@
           </div>
         </div>
       {{ end }}
-      <div class="min-w-0 min-h-0 max-w-prose">
+      <div class="min-w-0 min-h-0 max-w-prose grow">
         {{ .Content | emojify }}
       </div>
     </section>

I don't know if these are the correct ways to fix the rendering issues. If they are, I can submit a PR with these changes.

Theme version

v2.1.0

Hugo version

v0.96.0

Relevant Hugo log output

No response

[jpanther]

Thanks for raising this issue. This is the sort of thing that will hopefully be fixed up in @tailwindcss/tailwind-typography but they currently don't have any native RTL support which is why I'm doing a few customisations directly in the theme CSS. I'm hoping they will add it eventually given RTL is now being included in the base Tailwind project, but it may be a while yet.

Your solution is possibly the only way we can solve this in the meantime. I'm happy to look at a PR if you submit one.

[jpanther]

I believe I've found a solution to this using Javascript to add dir="auto" to code blocks in the page content when RTL languages are used. I'll add some changes to the next release and hopefully it improves this behaviour.