Code syntax highlighting bug

[rebelC0der]

Current Behavior

Code snippets are not highlighted when a post is loaded/opened.
Highlighting is enabled after a page refresh (video URL attached)

Steps to Reproduce

1. Create a post
2. Add a code snippet (some Python function for example)
3. Close the post
4. Open the post with the code
5. ⚠️ Code is not highlighted (stays gray)
6. Refresh the page
7. ✔️ Code is now highlighted

Expected Behavior

Code highlighting work when a post, containing code snippets, is opened.

Screenshots

Video: here

Environment

Server OS: Debain 11
Flarum core: 1.7.2
PHP version: 8.1.17
MySQL version: 10.5.18-MariaDB-0+deb11u1
Loaded extensions: Core, date, libxml, openssl, pcre, zlib, filter, hash, json, pcntl, Reflection, SPL, session, standard, sodium, mysqlnd, PDO, xml, apcu, bcmath, calendar, ctype, curl, dom, mbstring, FFI, fileinfo, ftp, gd, gettext, gmp, iconv, imagick, intl, exif, mysqli, pdo_mysql, Phar, posix, readline, shmop, SimpleXML, sockets, sysvmsg, sysvsem, sysvshm, tokenizer, xmlreader, xmlwriter, xsl, zip, Zend OPcache
+---------------------------------+---------+--------+
| Flarum Extensions               |         |        |
+---------------------------------+---------+--------+
| ID                              | Version | Commit |
+---------------------------------+---------+--------+
| flarum-suspend                  | v1.7.0  |        |
| sycho-profile-cover             | v1.3.3  |        |
| michaelbelgium-discussion-views | v7.2.1  |        |
| fof-user-bio                    | 1.1.1   |        |
| fof-upload                      | 1.2.3   |        |
| fof-socialprofile               | 1.1.5   |        |
| fof-profile-image-crop          | 1.1.1   |        |
| fof-polls                       | 1.3.0   |        |
| fof-nightmode                   | 1.5.1   |        |
| fof-formatting                  | 1.0.3   |        |
| fof-drafts                      | 1.2.2   |        |
| fof-doorman                     | 1.1.2   |        |
| flarum-tags                     | v1.7.1  |        |
| flarum-subscriptions            | v1.7.0  |        |
| flarum-sticky                   | v1.7.0  |        |
| flarum-statistics               | v1.7.0  |        |
| flarum-nicknames                | v1.7.0  |        |
| flarum-mentions                 | v1.7.0  |        |
| flarum-markdown                 | v1.7.0  |        |
| flarum-lock                     | v1.7.0  |        |
| flarum-likes                    | v1.7.0  |        |
| flarum-lang-english             | v1.7.0  |        |
| flarum-flags                    | v1.7.0  |        |
| flarum-emoji                    | v1.7.0  |        |
| flarum-bbcode                   | v1.7.0  |        |
| askvortsov-pwa                  | v3.1.3  |        |
| antoinefr-online                | v1.0.1  |        |
+---------------------------------+---------+--------+
Base URL: https://forum.rebelscience.club
Installation path: /var/www/flarum
Queue driver: sync
Session driver: file
Scheduler status: Never run
Mail driver: smtp
Debug mode: off

Output of php flarum info

Full info above ⏫

Possible Solution

For devs to review

Additional Context

n/a

[rebelC0der]

Apparently, this was reported in 2020: https://discuss.flarum.org/d/22635-how-to-change-syntax-highlighting/20

[askvortsov1]

In the interest of eventually allowing CSP headers and removing scripts from textformatter content, maybe the correct action here would be removing highlighting this way in favor of explicitly calling highlightjs.

[rebelC0der]

In the interest of eventually allowing CSP headers and removing scripts from textformatter content, maybe the correct action here would be removing highlighting this way in favor of explicitly calling highlightjs.

I have tried the highlight.js extension, and it seems to be broken (syntax highlighting is broken, does not "respect" the theming):

[rebelC0der]

I am wondering if there is some kind of hack/workaround for this, as I am waiting for this to work to start my community, which is code/programming focused, and this is one of the main features I need to work.

[n-peugnet]

I started thinking about making a Flarum extension that would do server-side code highlighting. It would produce a "highlight.js compatible" HTML result while parsing the newly posted messages, this way the code parsing and highlighting is only done once. The clients would only have to include a CSS stylesheet.
I will post an update if I finally start to do it.

[rebelC0der]

I started thinking about making a Flarum extension that would do server-side code highlighting. It would produce a "highlight.js compatible" HTML result while parsing the newly posted messages, this way the code parsing and highlighting is only done once. The clients would only have to include a CSS stylesheet. I will post an update if I finally start to do it.

Got you. Do you know of any workaround that could be used now, as I am blocked from starting my community for a few weeks now, because of this bug?

[n-peugnet]

So I started this extension today: club-1/flarum-ext-server-side-highlight.

It works well but is still has a few issues that I would like to address:

1. the highlighting is not shown in the preview Edit: done in v0.2.0
2. the themes are not configurable

That said it currently provides the following advantages:

1. the highlighting is done on the server so it is not up to the clients to do it
2. the server uses the cache to save highlighted blocks to only do the processing once
3. it works without any JS so even on the worst web browser the highlight will be there and there is no delay before the highlighting is applied
4. the theme adapts itself to the "dark mode" setting of Flarum
5. it works even with BBCode extension disabled (See Include highlight.js in markdown only configurations s9e/TextFormatter#206)

If you want to try it you can use the "repository" feature of composer, but I will probably create the package on packagist soon.

[rebelC0der]

@n-peugnet Thank you so much. I will wait for you to add the package to the packagist. Let me know when you have done that, and also how can I tip you? I don't see a tip/support on your GitHub page.

[n-peugnet]

@RebelCoderRU:

I will wait for you to add the package to the packagist. Let me know when you have done that

I published it on packagist and just released v0.2.0 that adds highlighting in the preview: https://packagist.org/packages/club-1/flarum-ext-server-side-highlight

and also how can I tip you? I don't see a tip/support on your GitHub page.

I did not take the time/motivation to setup it, I just applied for GitHub sponsors but it takes some time to receive the validation.

[rebelC0der]

@n-peugnet Just tested it and it has highlighting/theme issues:

But the highlighting works during the editing:

Do I need to disable some other extension?

[n-peugnet]

@RebelCoderRU: you should open an issue in my repo. It looks like there are two problems here. First I should add a note about the fact that the messages need to be reparsed (for example by editing them). Also it seems the dark theme is not properly detected, are you not using the "dark mode" switch in the appearance settings of Flarum ?

[rebelC0der]

@n-peugnet

are you not using the "dark mode" switch in the appearance settings of Flarum ?

Yes, correct.

messages need to be reparsed (for example by editing them)

Yes, I have tried that, and it seems to work as expected, after I Edit -> Save.

---

How hard is it to change the theme of the highlighting? Even though it now works, colors are very bad, hard to read:

Current version:

Desired version (or at least as readable in both, dark and light mode):