Syntax highlighting and formatting

[bjarnef]

In the current backoffice we have a <umb-code-snippet> component, which doesn't really highlight or format the code snippet.
When I added it back in the days I considered Prism or highlightjs, but we didn't want to include another library at that time.

We could probably have had a readonly instance of Ace Editor.

In the new backoffice the code editor is replaced by Monaco editor

I wonder if we can use the as code formatting or any other lightweight library for code formatting and syntax highlighting? I think it could be useful in packages showing a code snippet or maybe some help to more technical content editors.

https://stackoverflow.com/questions/52700307/how-to-use-monaco-editor-for-syntax-highlighting

[bjarnef]

I came across https://shiki.matsu.io/ for syntax highlighting which has integration with Monaco editor allowing to use Shiki's syntax highlighting engine to highlight Monaco: https://shiki.matsu.io/packages/monaco

@iOvergaard @nielslyngsoe some thoughts, which may be relevant regarding themes in backoffice.

[bjarnef]

I think we can use the colorizeElement function from monaco editor to handle this.
https://stackoverflow.com/a/53162251

There's a demo of it here:
https://microsoft.github.io/monaco-editor/playground.html?source=v0.52.2#example-creating-the-editor-syntax-highlighting-for-html-elements

@iOvergaard @leekelleher @nielslyngsoe

[bjarnef]

It seems there may be an bug using JSON, but a workaround: microsoft/monaco-editor#3105 (comment)

[bjarnef]

It can possible be used to highlight the CSS in RTE styles preview as well by combining the selector and the properties and possible lock the CSS selector.
https://dev.to/pranomvignesh/restrict-editable-area-in-monaco-editor-4hac

[bjarnef]

Another place where it would be useful is in the webhook delivery logs in Umbraco.

E.g. some similar to this shown in Adyen webhooks for JSON response:
https://docs.adyen.com/development-resources/webhooks/