How to enable syntax highlighting?

Product Support

AI-generated summary

Yt.w reported that syntax highlighting wasn’t working on their Discourse forum despite having configured languages like Ruby and Python. They shared screenshots showing their settings and code display, noting that the HTML appeared correct but highlighting failed. Later, Yt.w identified the issue as a CORS error triggered by a malformed module specifier in formatter.js, specifically referencing a path starting with /highlight-js/... from a cross-origin script. After investigation, Yt.w resolved the issue by modifying /lib/highlight_js.rb to prepend https:// to the generated path, ensuring the browser could correctly resolve the asset URL. This fix addressed the CORS restriction by making the path absolute and protocol-relative, allowing the highlight.js bundle to load properly.

1

I did not config any stuff related highlighting and highlighting is not working on my forum.

how I coding

The image shows a screenshot of a code editor with the word "ruby" and a list of commands. (Captioned by AI)
The image shows a screenshot of a code editor with the word "ruby" and a list of commands. (Captioned by AI)575×191 2.5 KB

Showing
image

Here is my setting

The image shows a screenshot of a coding software with a highlighted languages box and a dropdown menu, likely for a coding project or task. (Captioned by AI)
The image shows a screenshot of a coding software with a highlighted languages box and a dropdown menu, likely for a coding project or task. (Captioned by AI)793×508 27.6 KB

2

imager

the html code looks correct on my site

4

Hello, ruby is in my list.
Sorry that I made a misleading screenshoot

The image shows a list of highlighted languages with several highlighted items, including "python" and "ruby". (Captioned by AI)
The image shows a list of highlighted languages with several highlighted items, including "python" and "ruby". (Captioned by AI)655×232 36.7 KB

6

Looks like it was a CORS problem, any one can help me to solve it?

formatter.js:383  Uncaught (in promise) TypeError: Failed to resolve module specifier '/highlight-js/xxx.jp/9797975efac87d28baa695ae13ca72ccaf5120f5.js'. The base URL is about:blank because import() is called from a CORS-cross-origin script.
    at g (formatter.js:383:1)
    at m (formatter.js:383:1)
    at h (formatter.js:383:1)
    at p (formatter.js:383:1)
    at topic-link.js:14:1
    at formatter.js:383:1
    at composer.js:867:1
    at Array.forEach (<anonymous>)
    at k._decorateAndAdopt (composer.js:867:1)
    at k.init (composer.js:867:1)
    at e (jquery.js:10:1)
    at e (jquery.js:10:1)
    at e (jquery.js:10:1)
    at e (jquery.js:10:1)
    at e (jquery.js:10:1)
    at e (jquery.js:10:1)
    at Object.e [as render] (jquery.js:10:1)
    at jquery.js:10:1
    at e.exports (jquery.js:10:1)
    at jquery.js:10:1
    at Object.l [as patch] (jquery.js:10:1)
    at e.exports (jquery.js:10:1)
    at jquery.js:10:1
    at Object.l [as patch] (jquery.js:10:1)
    at e (jquery.js:10:1)
    at e.rerenderWidget (user-status-bubble.js:12:1)
    at invoke (backburner.js.js:280:1)
    at h.flush (backburner.js.js:197:1)
    at p.flush (backburner.js.js:358:1)
    at B._end (backburner.js.js:798:1)
    at B._boundAutorunEnd (backburner.js.js:523:1)
8

self solved

I changed /lib/highlight_js.rb
from

def self.path
    "/highlight-js/#{Discourse.current_hostname}/#{version SiteSetting.highlighted_languages}.js"
end

to

def self.path
    "https://#{Discourse.current_hostname}/highlight-js/#{Discourse.current_hostname}/#{version SiteSetting.highlighted_languages}.js"
end