#1

Hi All. I’m making a theme for Obsidian, and wanted to make a good code highlighting without plugins right inside the theme.

But I found a problem in the implementation of code highlighting .

Now, as I understand it, two illumination systems are used, prism js and code mirror 6.
and everything that uses Code Mirror in priority before prism js.

Therefore , many parameters such as .token.keyword, .token.number and ets just don’t work and are misleading.

But the problem is much bigger, since the code mirror illumination is very limited and cuts down on what prism js did.
If you take the highlighting of other languages like C#, then you will see that many parameters from prism js are stuffed into one parameter .cm-variable{}. I attach a screenshot of how it looks in Obsidian on the left and in Visual Studio on the right.

2022-02-06 16_27_22
2022-02-06 16_27_221788×573 93.5 KB

And another problem is the implementation of highlighting brackets and punctuation marks.
I was able to achieve its change only by using

span.cm-hmd-codeblock{ color: #8cb5b8} but at the same time it is not possible to separate it for a dark and light theme as it is done for other code elements.

Please make more parameters for Code Mirror or make sure that they do not kill the parameters of prism js and duplicate only the same parameter. and add a parameter for parentheses and punctuation marks.

#2

Please, open a feature request for this.

#3

Good afternoon, dear moderator. With all due respect, this is not a feature that I would like to be added. And the broken code highlighting. When code mirror was implemented. Broke several tags from prism js. I always ask you to return this to working condition.

#4

More specifically, the following does not work :

.theme-dark .token.punctuation
.theme-dark .cm-punctuation
.theme-dark .token.attr-value
.theme-dark .token.function
.theme-dark .token.class-name
.theme-dark .token.boolean
.theme-dark .token.char
.theme-dark .token.property
.theme-dark .token.constant
.theme-dark .token.symbol

.theme-dark .cm-bracket - working only in html

You can set them any color but you won’t see any result.

I have prepared an example insert it and look at any code in obsidian

.theme-dark .token.punctuation,
.theme-dark .cm-punctuation,
.theme-dark .token.attr-value,
.theme-dark .token.function,
.theme-dark .token.class-name,
.theme-dark .token.boolean,
.theme-dark .token.char,
.theme-dark .token.property,
.theme-dark .token.constant,
.theme-dark .token.symbol,
.theme-dark .cm-bracket {
     color: #3002fc;
}

P.S. It is indicated for a dark theme, but for a light one, everything is the same.

#5

Are you talking about reading view or editing? For reading view, we still use Prism.js and it’s highlighted the same way as it did before. For editing view, because it’s a live editor, we can’t use Prism.js and therefore we have to use CodeMirror’s own highlighters which is much more limited in what tokens it can emit.

Unfortunately, I can’t just slap Prism.js on the editor to make it emit better tokens. Someone will either have to re-write all the CodeMirror language parsers or somehow make a prism-to-codemirror shim, both of which require a lot of work.

We are going to consider this a feature request, to implement (and improve) the syntax highlighter when working in the editor. Bug reports are reserved for issues that are unintentional from our part. While I agree that this specific issue is not desired, it is unfortunately intentional due to technical limitations, at least for now.

What framework did the developer use to create Obsidian desktop application?
#7

Thank you very much for your reply. I am a recent obsidian user and quickly got used to not using edit mode . I apologize for being inattentive. I will use edit mode for highlighting the code for now.
Obsidian is a great place to store code snippets and snippets. I will really wait for more code mirror tags to be added .

I also want to give you a link to the ready-made code mirror 6 theme, maybe it will simplify the implementation of illumination in obsidian. https://github.com/codemirror/theme-one-dark.

#8