Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Syntax highlighting doesn't work in code blocks in markdown #3618

Closed
mejo- opened this issue Nov 10, 2022 · 10 comments · Fixed by #4592
Closed

Syntax highlighting doesn't work in code blocks in markdown #3618

mejo- opened this issue Nov 10, 2022 · 10 comments · Fixed by #4592
Assignees
Labels
1. to develop enhancement New feature or request feature: formatting Features related to text formatting and node types format: markdown javascript

Comments

@mejo-
Copy link
Member

mejo- commented Nov 10, 2022

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

If we enter code blocks in collectives the syntax highlighting doesn't work:
Screenshot_2022-11-10_091802

If we open the same file via the files tab with the files text editor,
Screenshot_2022-11-10_091754

syntax highlighting works properly:
Screenshot_2022-11-10_091805

Software Versions:

  • Firefox 106.x
  • Nextcloud 24.0.7
  • Collectives 1.5.1
@max-nextcloud
Copy link
Collaborator

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.

@max-nextcloud max-nextcloud transferred this issue from nextcloud/collectives Dec 29, 2022
@max-nextcloud max-nextcloud changed the title Syntax highlighting doesn't work in collectives Syntax highlighting doesn't work in code blocks in markdown Dec 29, 2022
@juliusknorr
Copy link
Member

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.

@juliusknorr juliusknorr added enhancement New feature or request 1. to develop labels Dec 29, 2022
@susnux
Copy link
Contributor

susnux commented Dec 31, 2022

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
Copy link

CWempe commented Apr 1, 2023

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
Copy link
Collaborator

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.

@juliusknorr
Copy link
Member

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

mejo- added a commit that referenced this issue Jul 28, 2023
Fixes: #3618

Also only load core highlight JS package in EditorFactory.js (required
for syntax highlighting in plaintext editing). This reduces the size ofr
compiled editor.js by almost 1MB.

Signed-off-by: Jonas <[email protected]>
mejo- added a commit that referenced this issue Jul 28, 2023
Fixes: #3618

Also only load core highlight JS package in EditorFactory.js (required
for syntax highlighting in plaintext editing). This reduces the size ofr
compiled editor.js by almost 1MB.

Signed-off-by: Jonas <[email protected]>
backportbot-nextcloud bot pushed a commit that referenced this issue Jul 28, 2023
Fixes: #3618

Also only load core highlight JS package in EditorFactory.js (required
for syntax highlighting in plaintext editing). This reduces the size ofr
compiled editor.js by almost 1MB.

Signed-off-by: Jonas <[email protected]>
backportbot-nextcloud bot pushed a commit that referenced this issue Jul 28, 2023
Fixes: #3618

Also only load core highlight JS package in EditorFactory.js (required
for syntax highlighting in plaintext editing). This reduces the size ofr
compiled editor.js by almost 1MB.

Signed-off-by: Jonas <[email protected]>
mejo- added a commit that referenced this issue Jul 28, 2023
Fixes: #3618

Also only load core highlight JS package in EditorFactory.js (required
for syntax highlighting in plaintext editing). This reduces the size ofr
compiled editor.js by almost 1MB.

Signed-off-by: Jonas <[email protected]>
@mejo- mejo- self-assigned this Jul 28, 2023
@theroch
Copy link

theroch commented Aug 11, 2023

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
Copy link
Collaborator

Exactly. It's available in 26.0.5 and 27.0.2.

@theroch
Copy link

theroch commented Sep 7, 2023

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
Copy link
Collaborator

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
1. to develop enhancement New feature or request feature: formatting Features related to text formatting and node types format: markdown javascript
Projects
Archived in project
Development

Successfully merging a pull request may close this issue.

6 participants