Bug: Site stylesheets are missing colo(u)red pre-formatted text

Site Feedback
, , , ,
1

This discourse is configured with three themes: Default, Dark, and Ubuntu.

All three are missing the style sheet elements for coloured preformatted text.

For example, this:

```bash
#!/bin/bash
echo "Starting backup..."
tar -czf backup.tar.gz /home/user/documents
echo "Backup complete!"
```

Should look like this:

image

But actually renders like this:

image

These boxes use the css element code.lang-bash (in this example), but there are plenty more such as code.lang-yaml and code.lang-toml and so on.

On this site everything renders the text as colour #222222 on #F9F9F9 - grey on grey.

 _________
< BORING! >
 ---------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

It seems the default discourse theme uses hljs to colourise the text…

image

image

Other discourse sites I have checked which use hljs to colourise the text correctly include:

etc. You get the idea. We’re the outlier here.

The only site I have found which has the same drab colourless design is… :drum:

(sad trombone)

Please can whoever implemented the new design, add back in the colourised pre-formatted text styles.

Thanks.

5 Likes
2

I noticed some js errors in the developer console this morning, like you do. This got my spidey-sense tingling:

2highlight-syntax.js:104 Uncaught (in promise) TypeError: Failed to resolve module specifier '/highlight-js/discourse.ubuntu.com/9797975efac87d28baa695ae13ca72ccaf5120f5.js'. The base URL is about:blank because import() is called from a CORS-cross-origin script.
    at g (highlight-syntax.js:104:57)
    at m (highlight-syntax.js:74:5)
    at h (highlight-syntax.js:60:25)
    at p (highlight-syntax.js:28:22)
    at post-decorations.js:30:16
    at plugin-api.js:126:26
    at post-cooked.js:87:43
    at Array.forEach (<anonymous>)
    at k._decorateAndAdopt (post-cooked.js:87:28)
    at k.init (post-cooked.js:76:10)
    at e (create-element.js:19:22)
    at e (create-element.js:39:25)
    at e (create-element.js:39:25)
    at e (create-element.js:39:25)
    at e (create-element.js:39:25)
    at e (create-element.js:39:25)
    at Object.e [as render] (create-element.js:39:25)
    at patch-op.js:105:33
    at e.exports (patch-op.js:112:1)
    at patch.js:60:19
    at Object.l [as patch] (patch.js:68:1)
    at e.exports (patch-op.js:34:31)
    at patch.js:60:19
    at Object.l [as patch] (patch.js:68:1)
    at e (patch.js:16:26)
    at e.rerenderWidget (mount-widget.js:175:24)
    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 backburner.js.js:523:1

I did some googling and found this thread https://meta.discourse.org/t/issue-with-relative-path-causing-cors-error-on-discourse-sites/333024 and wondered if it might help the web team with some debugging.

Seems our site is configured incorrectly, perhaps.

curl --silent -I https://discourse.ubuntu.com/highlight-js/discourse.ubuntu.com/9797975efac87d28baa695ae13ca72ccaf5120f5.js
HTTP/2 200
date: Tue, 04 Mar 2025 07:52:55 GMT
content-type: application/javascript; charset=utf-8
content-length: 120848
set-cookie: DISCOURSE-K8S_AFFINITY=1741074776.353.45.687287|078f402a49fdc959a550ab8a5dea4dd5; Max-Age=3600; Path=/; Secure; HttpOnly; SameSite=Lax
x-frame-options: SAMEORIGIN
x-xss-protection: 0
x-content-type-options: nosniff
x-download-options: noopen
x-permitted-cross-domain-policies: none
referrer-policy: strict-origin-when-cross-origin
x-discourse-route: highlight_js/show
last-modified: Wed, 04 Mar 2015 07:52:55 GMT
vary: Accept
cache-control: max-age=31556952, public, immutable
x-request-id: 75b2fe6c559f44feb87b7cd72943c1d1
x-runtime: 0.005646
strict-transport-security: max-age=15724800; includeSubDomains

Could this be why our syntax highlighting is broken? Can a Canonical web person please look? Maybe get a Jira ticket on this?

1 Like