problem with LTR <code> in RTL content

[seyedahmaddv]

Hi, I am building a blog where my main content is in RTL. Some parts, like code blocks (), need to be displayed in LTR.

I tried to apply styles using a separate CSS file, but it doesn’t work. Even though I removed additional styles related to dark mode and global resets, the bullet points for lists disappear or get misplaced (they appear on the left side of RTL text).

Current behavior:

Lists in RTL content lose their bullet points or alignment.

Code blocks do not respect the LTR direction, even with CSS like:

.post-content pre,
.post-content code {
  direction: ltr !important;
  text-align: left !important;
}

Expected behavior:

RTL content remains RTL.

Code blocks inside RTL content are displayed LTR.

List bullet points appear correctly on the right side.

Steps taken:

Removed extra global styles including dark mode CSS.

Tried applying a separate CSS file with .post-content pre, code { direction: ltr; }

Still no effect.

Question: Is there a way to enforce LTR for code blocks inside RTL content without breaking global RTL styling?