Code block outlook doesn't work well

Product Support

AI-generated summary

A user reports that code block syntax highlighting is not working properly after upgrading to Discourse 2.9.0.beta6, with keywords in code blocks (e.g., Python) no longer colored. Another user confirms the issue, noting that while color highlighting fails, code block diffs still work. A solution is proposed by Takanobu_Fuse: uninstall the hljs-theme-picker component, then manually copy the CSS from a theme (e.g., rainbow.css) into the site’s theme CSS/HTML. SkyLin confirms this workaround resolves the issue but notes the problem likely stems from a bug in the hljs-theme-picker component and requests a formal fix from the Discourse team.

1

The code block works fine in the past. However, there is an user created a new post with code block yesterday, and I found the format failed. Not only this post with block code, but also whole site.

I just rebuild discourse app to the most update version, but the result is still the same.

How can I solve this issue? Thanks for help.

Here comes the url:

2

The code blocks look fine to me, do you have a screenshot of the code block format failing?

3

Code Block Sections are not classified by colors after upgrade discourse 2.9.0.beta6

rainbow

rainbow
rainbow737×540 15.9 KB

mono-blue

Screenshot from 2022-07-01 11-28-45
Screenshot from 2022-07-01 11-28-45747×545 24.4 KB

4

Thanks for great input.

However, it seems meta discourse forum is version 2.9.0.beta6(cause it support “Loading splash screen” now). And the code block works fine here.

5

My bad. I should say color outlook instead.

figure 1. the color of python(actually all language) keyword doesn’t highlight

python code sample
python code sample1092×489 18.5 KB

original post:

figure 2. however, the color diff of code block still works fine

code block diff sample
code block diff sample1085×162 10.1 KB

original post:

6

My Solution

  1. uninstall component “hljs-theme-picker”

  2. pick up the one css file ( I picked up rainbow.css) from the below

  1. edit theme CSS/HTML, copy and paste contents in rainbow.css
    Screenshot from 2022-07-01 19-56-08
    Screenshot from 2022-07-01 19-56-081169×856 86.3 KB

This is wrong???

7

Many thanks to Takanobu san.

This solution works fine.

python code sample - correct outlook
python code sample - correct outlook1080×499 32.3 KB

I think this means discourse hljs theme picker has some hidden bug. No reason the same code works fine with CSS but failed on component installed.

And I’m sorry that I will not set your solusion as :white_check_mark: Soluion, though it truly solve my problem. I leave it as open and hope discourse team @cocococosti can find out the reason behind and work out a formal solution.

The CSS code I use is what I set in hljs theme picker:

Many thanks again.