Added syntax highlighting to code-blocks (and it works!)

[TuxTheXplorer]

Hi,
This PR showcases the possibility of adding syntax highlighting to code-blocks (finally!) within normal text notes.
It is achieved by combining the CKEditor5-CodeBlock-With-Syntax-Highlight plugin with the trilium-ckeditor5 repo, then swapping the newly built ckeditor into trilium. After this is done, it is necessary to make small edits to the source files of trilium by changing the mime types from text/x-language to simply their language part (or their highlight.js supported equivalent).

In my repo I've included a build.sh file, which does all of the below automatically and creates a fresh build with 4 example languages ready to be used within code blocks (plaintext, c, php, python).

I've created this as a proof of concept to show that it is possible to add syntax highlighting to trilium, albeit by jumping through a couple hoops. I don't expect this PR to be accepted, I only intended it to be used as a heads-up about the possibilty of implementing syntax-highlighting. I hope this could help development and that we see syntax highlighting implemented sometimes in the future.

Some quirks about the current state of the demo:

• The colours don't look nice on dark themes (but the colours can probably be altered)
• Trying to set a code-block to a language without the language's mime type being fixed first, will crash trilium
• Opening notes containing code-blocks with not-yet fixed mime types will crash trilium.

Overall description of how this thing works
The overall process of adding syntax highlighting to trilium is as follows:

• Download trilium-ckeditor5, trilium, and the ckeditor5-code-block plugin
• Combine ckeditor5-code-block and trilium-ckeditor5, replacing the original codeblock src
• Combine the new custom trilium-ckeditor5 with trilium (swap out the default ckeditor)
• Parse trough every file in the trilium source code and make the correct modifications for any language you want to use and replace text/x-language with the correct alias of the language from the highlight.js supported languages list

[zadam]

Hi, interesting work, but as you mention it's rather a POC and this is not going to get merged.

The next step would be to get required changes in the fork of ckeditor5-code-block plugin upstreamed into the CKEditor.

[Sod-Almighty]

I would like to see this feature implemented.

The next step would be to get required changes in the fork of ckeditor5-code-block plugin upstreamed into the CKEditor.

Is this likely to happen?

[zadam]

Not from my side. Just a hint for somebody who would like to give it a shot.

[TuxTheXplorer]

I would like to see this feature implemented.

The next step would be to get required changes in the fork of ckeditor5-code-block plugin upstreamed into the CKEditor.

Is this likely to happen?

Hey I've been busy lately and probably won't have the time in the near future to refine the POC and submit a PR to ckeditor. Feel free to play around with it though, there are instructions provided in the repo on how to replicate the whole process.

[antoniotejada]

Check #2822 for a simpler solution

[eliandoran]

@TuxTheXplorer , are you still interested in contributing to Trilium? If so, I think your knowledge with working on the CKEditor might come in useful for TriliumNext/Notes#20 where we'd like to add this feature as a first-class citizen.