Syntax highlighting doesn't work in code blocks in markdown

[mejo-]

In GitLab by @theroch on Nov 10, 2022, 09:20

If we enter code blocks in collectives the syntax highlighting doesn't work:

If we open the same file via the files tab with the files text editor,

syntax highlighting works properly:

Software Versions:

• Firefox 106.x
• Nextcloud 24.0.7
• Collectives 1.5.1

[max-nextcloud]

This is a limitation of the text app which we use for markdown editing. So I will try and move this issue into the text repo.

[juliushaertl]

Last time I checked a while ago (before the move to tiptap v2) this was tricky due to the fact that we'd need to preload all highlight.js syntax files that we want to support. I couldn't find a working way to avoid that, but things might have changed in the meantime.

[susnux]

This is something I already noticed some time ago and tried to fix, but currently it only works if you edit the file after loading the file, as the tiptap lowlight plugin is only triggered if the content changed.
(So loading the file -> load needed highlight.js code -> edit file & trigger content changed -> tiptap refreshes the decorations).

I do not see an easy way to do this without changing tiptap :/

[CWempe]

I tried Collectives for the first time today, because I am looking for such a tool in my home projects.

And I immediately stumbled upon the missing syntax highlighting.

I understand this might be difficult.
But please put this on the road map.

Maybe this is even a feature that should be listet in nextcloud/collectives#482.

It seems like almost all the other solutions do support this:

https://confluence.atlassian.com/doc/code-block-macro-139390.html
https://www.bookstackapp.com/blog/beta-release-v0-25-2/#code-block-updates
https://www.notion.so/de-de/help/code-blocks
https://extensions.xwiki.org/xwiki/bin/view/Extension/EditorTools/Syntax%20Highlighting%20Application
https://community.coda.io/t/code-block-syntax-highlighting/1214/35 (not yet)

[max-nextcloud]

My understanding is that either highlight js or lowlight js come with a set of frequently used languages and then a long set of all supported languages.
I wonder if we could limit syntax highlighting to the frequently used languages and preload them.

[juliushaertl]

Yes, this seems reasonable as a easy way.

More complex but might be nice would be to seee if we can dynamically extend the loaded languages and trigger a rerender of the code block:

1fc013c#diff-dc0ffe297168396604403a9825d43ae7a4cae86885f947a3191c71b6f028e66bR53-R54

[theroch]

I think the fix is only available for Nextcloud version 26 and above, right?
In Nextcloud 25.0.10 with Collectives 2.7.0 the issue still exists.

[max-nextcloud]

Exactly. It's available in 26.0.5 and 27.0.2.

[theroch]

We've tested it now on 27.0.2. The syntax highlighting is working in edit mode but in the view mode it doesn't.
Should I open another issue or does it belong to this issue?

[max-nextcloud]

@theroch It's fixed in text but we need to release a new version of collectives with that uses the new version of text for view mode.
We're working on it and the fix will automatically land in collectives then.
So please open a new issue in collectives to document this is still missing.