I’m encountering an issue with code block formatting in Discourse. When posting Python code, certain parts of the code (such as URLs and paths) are being highlighted in red or formatted unexpectedly, as shown in the screenshot below:
Problem Description
When I post Python code using triple backticks for code blocks, specific parts of the text (like underscores in URLs or paths) are being highlighted in red or misformatted.
I’ve tried escaping characters, using HTML entities, and removing syntax highlighting by not specifying the language, but the issue persists.
Example of Code
Here’s a snippet of the code that is causing issues (Python):
I’m not familiar with the syntax highlighting system / settings as a whole, but if you just want to get rid of the red text you could use CSS in your site’s theme:
code.language-python span {
color: inherit;
}
The red is used for indicating strings, so if you wanted to just change that to a different color you could do something like this:
code.language-python span.hljs-string {
color: #FFF; /* Replace with intended color */
}
Aside from the red text, were there other parts that are being mis-formatted?
Thank you for your suggestion, @bryce! I’ll try adjusting the CSS in our site’s theme to address the red text issue.
I’ll try adjusting the CSS in our site’s theme to address the red text issue.
I think the major issue is that the font in my original screenshot isn’t formatted to look like code—it lacks the monospaced font style that’s typically used for code blocks. Ideally, I was hoping the code would appear more like this, with the proper font and font color:
Is there a way to ensure that the code is displayed in a monospaced font, similar to the one in this example?
Aside from this, I haven’t noticed any other major formatting problems, but I’ll keep testing and let you know if anything else comes up.
The highlight colors can be changed by overriding these CSS variables:
--hljs-comment: Used for code comments
--hljs-number: Used for number values in code
--hljs-string: Used for string values in code
--hljs-literal: Used for literal values in code
--hljs-tag: Used for HTML/XML tags
--hljs-attribute: Used for attributes in HTML/XML tags
--hljs-symbol: Used for symbols in code
--hljs-bg: Used for the background color of code blocks
--hljs-builtin-name: Used for built-in function names
For example to override the string color:
:root {
--hljs-string: pink;
}
It seems like hljs (the highlighting library used) may not support highlighting python identifiers like degirum in your example, but you should be able to get pretty close by changing the other colors.
For the font, that’s strange–code blocks should appear with a monospace font by default. I’d suggest double-checking your theme to make sure nothing in being overridden there.
Just to clarify, we’re currently using the Default theme with no additional components, so it’s strange that the monospace font isn’t being applied by default to the code blocks. It doesn’t look like anything is overriding it.
For reference, I’m working from Chrome Version 127.0.6533.100 on macOS 14.6.1.
The font looks correct, and the links are highlighted as expected. However, I’m still experiencing the issue in our community where the font isn’t displayed correctly, and links are not highlighted as they should be.
I’m not sure why this discrepancy is occurring.
For reference, here is the link to the page on our community.
Thank you both for taking the time to help me with this. It’s good to know that the font is appearing as monospace for others.
Since it’s not displaying correctly on my end, it might be an issue specific to my setup or environment. It’s appearing incorrectly for me on both Chrome and Safari (both latest versions). It’s also appearing incorrectly for others in my organization on PCs.
I just checked from a personal computer, and the issue is persisting there as well. The code font is still not displaying as monospace, and the links aren’t highlighted correctly.
This seems to rule out an issue with my primary setup, as the problem is consistent across different devices.
I just checked in Safe Mode, and the issue seems to be resolved there—the code font appears as monospace, and the links are highlighted correctly.
This is confusing because we’re using the Default theme with no additional components, so I’m not sure what might be causing the problem in normal mode.
That’s what I would expect. Those strings are in a different color so that you can quickly tell that they are strings. Isn’t this what it looks like in your text editor?
I think you might just want to change the SiteSetting.default_code_lang to “text” or “”. There’s also a highlighted_languages setting. I’m pretty sure that here they’ve changed the default code language to something like text so
This looks ike this:
result=model("https://big.bang")
and if I force it with ```python then it looks like this
Since I’m managing the community, my goal is to be able to see it how the end users should be seeing it. As you can see on the right side, it just doesn’t look right.
