Syntax Highlighting in Live Preview and Edit Mode

[VlaD-T]

Hi everyone,

What I’m trying to do

I’ve been using Obsidian to save some coding notes written in ABAP language. In Edit and Live Preview mode there is no syntax highlighting and at first I thought that ABAP syntax was not supported, but after switching to reading mode the highlighting worked perfectly. After some debugging I saw that the Prism.js included ABAP language and that is why it is working fine in reading view.

I see there are lot’s of topics to the same problem, except they are about other languages.

After looking deeply into the coding I’ve seen that lots of languages are supposed to work, because they were included in Prismjs. ABAP is not an exception and is there too.

I wanted to ask for ideas how to make it work, like if writing a plugin would help.

UPD

I looked futher into the coding and I see that obsidian adjustes the html code depending on the view mode.

This is how the code looks in reading mode. Each span has a class.

This is how it looks in edit/preview mode.

It looks like CodeMirror rewrites the classes…
It may be also because ABAP is included in Prismjs, but is not present in CodeMirror meta.min.js file, but that is just a guess.

Thanks in advance!

[VlaD-T]

UPD 2

Simple cases can be covered by additional styling, either via theme.css, or via style.css from custom plugin. Simple case - one line of coding. More complex cases, like several lines of coding can not be styled so simple…

Read Mode:

Edit/Live Preview Mode:

If I see it right, this can be covered by custom plugin though…The plugin should accept the line and parse it using the keywords from Prismjs. Inside of each cm-block will be several new span’s with corresponding content. The question is if it is easier to create this plugin or to add CodeMirror settings

[VlaD-T]

UPD 3.
After some research, the only solution would be to add CM language pack. There are some examples but I had no time to do that.