Issue with Code Block Formatting in Discourse – Red Text and Unintended Highlighting

Support
21

Isn’t that exactly what it looks like in your Discourse image? (Except in your editor import and as are bold)

22

Hi Alex,
I think @Moin has the right idea–I’m seeing some styling applied to the code blocks that looks like it’s probably coming from Custom CSS/HTML in the theme.

This image shows a computer screen displaying a code editor with a Python script that includes various imports and function definitions. (Captioned by AI)
This image shows a computer screen displaying a code editor with a Python script that includes various imports and function definitions. (Captioned by AI)1294×322 62 KB

I think this line (font-family: Consolas;) could be safely removed since it’s overriding these existing styles which use the same font but also specify fallback options:

code, pre {
    font-family: var(--d-font-family--monospace);
}

:root {
    --d-font-family--monospace: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
}

Maybe your computer isn’t able to display Consolas and is just falling back to the default (non-monospace) font. You can check here to see if that CSS is present:

1096×960 69.4 KB

1 Like
24

Ah, I also just noticed we do have an official theme component for customizing code block appearance:

25

I think this was likely the issue but I didn’t verify. I ended up switching themes and it resolved the issue. Thanks, everyone, for your input! And thank you again, Bryce, for finding the theme component for customizing code block appearance.

1 Like