Is it possible to colorize inline-code like code-block

Hello, i would like to change de color of my inlinde-code, but i don’t want one simple color. I would like it look likes my code blocks exemple:
const name = "James" and than like any code editor, the “const” is for ex blue, the variable name is white, the equal is red, the string is green ect…
My theme is Dracula for obsidian
I’ve tried multiple things here is one of my snippets:

.cm-s-obsidian span.cm-inline-code span.cm-string {
  color: #6a8759;
}

.cm-s-obsidian span.cm-inline-code span.cm-number {
  color: #f15d5a;
}

.cm-s-obsidian span.cm-inline-code span.cm-keyword {
  color: #9b869b;
}

Unfortunately it’s not doing anything… I’m trying to think that it’s not possible, so my first question is, is it possible, and if yes then how ?
Thank you very much for your help.

I’ve not heard of any syntax highlighting happening in inline code blocks. I did however do a simple search related to “prismjs inline code” where prismjs is the engine used to do the syntax highlighting, and found this, with code like the following:

<code class="language-javascript" style="display: inline">const name = "James"</code>

With just the language class it still displays as a block (even within other text), but if you add style="display: inline; " to it blends into the paragraph. However in some of my tests the line is not aligned with the other text… Could most likely be countered with some other CSS somehow.

In one of the better tests it looked like this:
image

Note, this is reading view with the Minimal theme. In live preview, it’s just a code block. But if I remember correctly, live preview uses a different syntax highlight engine.

2 Likes

Ok it’s not showing on edit mode but working for the reading mode. Well i think it’s the best option so far…
Thank you for the help!

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.