Block code and Highlightjs

[castroCrea]

📝 Provide detailed reproduction steps (if any)

1. take an EditorBuild width Code Block Plugin
2. import highlightjs on header

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/androidstudio.min.css">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
   <script>hljs.initHighlightingOnLoad();</script>

3. Then check for code on every change

   BalloonEditor.create(document.querySelector("#editor"))
   .then(editor => {
       editor.model.document.on( 'change:data', (event) => {
       console.log( 'The data has changed!', event );
       // hljs.highlight()
       document.querySelectorAll('pre code').forEach((block) => {
           hljs.highlightBlock(block);
       });
   } );
   });

✔️ Expected result

What is the expected result of the above steps?

❌ Actual result

What is the actual result of the above steps?

If found out that it's work but ckeditor5 refresh the content just after hljs change the content. So when it's trigger there is a change form hljs and a reverse change form ckeditor5

📃 Other details

• Browser: Chrome
• OS:Mac OS
• CKEditor version: 17.0.0
• Installed CKEditor plugins: …

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[Reinmar]

It's impossible to run an external highlighter on CKE5's content. CKE5 controls every smaller aspect of its DOM. External tools must not modify it.

This means that it's impossible to have code highlighting in the current code blocks feature. There's a separate feature request for more "code-oriented" feature: https://github.com/ckeditor/ckeditor5/issues/5769.

[castroCrea]

Ok I understand, can you make this part of the doc more clear

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

We don't really see the "impossible", and the title make us thinks that it's is possible.

[Reinmar]

Although live code block highlighting is impossible when editing in CKEditor 5 (learn more), the content can be highlighted when displayed in the frontend (e.g. in blog posts, messages, etc.).

I'm sorry, but this is the very first sentence in that section. I understand how one could miss it when scanning the text but it's the first time we see this issue reported. If we'll see that more people have a problem with this, we'll definitely consider improving that section.

However, if you have an idea for how it could be written, a PR would be awesome.

[antoniotejada]

@Reinmar

It's impossible to run an external highlighter on CKE5's content. CKE5 controls every smaller aspect of its DOM. External tools must not modify it.

This means that it's impossible to have code highlighting in the current code blocks feature. There's a separate feature request for more "code-oriented" feature: https://github.com/ckeditor/ckeditor5/issues/5769.

Actually, there's a quite simple solution, check https://github.com/antoniotejada/Trilium-SyntaxHighlightWidget (and thanks for all the CKEditor help you provide here and at stackoverflow!).

[zgpnuaa]

I successfully configured this plug-in CKEditor5-CodeBlock-With-Syntax-Highlight in ckeditor5. It is great in edit mode, but it does not display correctly in preview mode.

[Badlapje]

Can we integrate the work by @zgpnuaa in the official plugin? I don't understand why it's not integrated already. Code blocks without highlighting suck. You can almost copy/paste the fix. Please make it happen.

[Witoso]

@Badlapje please read the comment above. AFAIK we see such capability in a bit bigger scope and as a new feature, not necessarily implemented alongside the current code block.

Unfortunately, rarely, do we see things that are a copy/paste fix. The linked package has no tests and breaks in some scenarios. If you have the capability, we always look forward to contributions and PRs that will push some things further.

[antoniotejada]

@Witoso

This means that it's impossible to have code highlighting in the current code blocks feature.

That is not correct, see https://github.com/antoniotejada/Trilium-SyntaxHighlightWidget

[Witoso]

Please @antoniotejada consider that we need to think about a much bigger landscape of use cases and integrations. This being able to work in one app's context, may not solve all edge cases and setups that we stumble upon. 

That being said, personally, I don't like the world impossible that is used in this discussion. Probably a better would be: taking into account all pros and cons, we see this as a separate feature, not an extension. I will try to dig around as the research was taking place a while ago.

[antoniotejada]

@Witoso

Please @antoniotejada consider that we need to think about a much bigger landscape of use cases and integrations. This being able to work in one app's context, may not solve all edge cases and setups that we stumble upon. 

If you "need to think about much bigger landscape of use cases and integrations" instead of using a simple and working implementation of syntax highlighting on a code block, then there's little else to add.

[Witoso]

It's just a reality of an open-source project with a commercial twist. There's no bad ill on our side, we are truly happy that the community is engaging with us, and sharing their solutions. It's harder when you have more integrations and use cases to pick something and implement. As said I will try to take a look at this again from a new perspective.