Syntax highlighting on code blocks?

[jat255]

As I understand it, CKEditor does not support syntax highlighting, but is compatible with 3rd party JS highlighters. The selection of a code language adds certain CSS classes to the code block, which can then be interpreted by the highlighter. Would using something like this be possible within Trilium?

Relevant portion of the CKEditor docs:

https://ckeditor.com/docs/ckeditor5/latest/features/code-blocks.html#integration-with-code-highlighters

[zadam]

Hi, what they describe in docs is not (fully) applicable to Trilium - what they mean is that plain HTML created in CKEditor and then rendered as-is (= outside of CKEditor) can be colored with the help of JS highlighter. But in Trilium we (almost) always use full CKEditor, not just render resulting HTML (text is always editable) and these highlighters cannot be used on "live" CKEditor instance.

[jat255]

I understand, thank you for the clarification. Is this the upstream issue that would enable this?

https://github.com/ckeditor/ckeditor5/issues/5769

If so, that would be good to track to be able to port into Trilium when/if the time comes. Thanks for the great project! I'm enjoying using it so far

Also, note to others that come looking: the code snippet feature in CKEditor is currently in their backlog, so it doesn't look like it will be released in the short term, but if you want to see this in Trilium, please add a "thumbs up" on CKEditor's issue so they know that's a desired feature (or help them develop it!)

[zadam]

Yes, that's the correct issue. I imagine it would be a big effort, so I'm not holding my breath ...

[hannah23280]

It is pity that code block do not have syntax highlighting. In fact, I was even hoping not only code block can have auto syntax highlighting, but we can also manually change the color for some of the code. This is useful for developer who want to draw attention to specific portion of the code (perhap by changing the font color of the portion to red, or maybe even bold it). The only note taking software that can do this currently is notion. Truely hope trillium , one day, can do the same.

[ydam24]

syntax highlighting would greatly enhance user experience. perhaps this real-time syntax highlight plugin will be helpful?(Sorry but I know a little about nodejs and CKEditor...) https://github.com/regischen/CKEditor5-CodeBlock-With-Syntax-Highlight

[zadam]

Interesting, they did it somehow ... However the plugin does not have any releases and last commit is half a year old.

[Michaelpalacce]

@zadam any chance of implementing this? It seems pretty straightforward?

[zadam]

In short, no.

It's also far from straightforward to implement, see my first comment in this issue for details.

[kaaass]

Although implementing real-time code highlighting requires a lot of work from CKEditor, I think there are actually other ways to implement code highlighting if not considering real-time editing. For example, highlighting when code block is out of focus, or highlighting in read-only mode only (#1111).

I tried to implement one with script note as a PoC: https://gist.github.com/kaaass/59be808d73fd1c8314358ae0c45c81fd. Although the dirty hack is used to detect read-only mode, it provides code highlighting for text notes and it looks good to me.

Anyway, thanks for this awesome repo! Hope these could help.

[ChoKhoOu]

Although implementing real-time code highlighting requires a lot of work from CKEditor, I think there are actually other ways to implement code highlighting if not considering real-time editing. For example, highlighting when code block is out of focus, or highlighting in read-only mode only (#1111).

I tried to implement one with script note as a PoC: https://gist.github.com/kaaass/59be808d73fd1c8314358ae0c45c81fd. Although the dirty hack is used to detect read-only mode, it provides code highlighting for text notes and it looks good to me.

Anyway, thanks for this awesome repo! Hope these could help.

Thank you for providing the plugin, it is very useful for me :). It would be even better if it could highlighting when code block is out of focus

[kaaass]

It would be even better if it could highlighting when code block is out of focus

I did several searches about this, and it turns out that it is not easy to tweak CodeBlock plugin dynamically, which is required by such a plugin. For the same reason, activating CKEditor5-CodeBlock-With-Syntax-Highlight by a plugin is difficult too. So I guess recompiling and replacing ckeditor.js is a better choice.

BTW, I also found that CKEditor5-CodeBlock-With-Syntax-Highlight will change the output html of CodeBlock, which means it might not be a good choice under this circumstance.

[antoniotejada]

Check https://github.com/zadam/trilium/discussions/2822 for realtime syntax highlight on codeblocks

[yllekz]

Hello, I see there's a widget for this, is this something that can be enabled now? Syntax highlighting in code blocks within notes would be awesome.