Syntax Highlighting Colours

[Tiste_Sg]

Hello,

I am quite excited I finally found a markdown editor that supports power query!
Now I’m just a bit confused as to why the colours in the code block have nothing to do with the native power query colours. Is there a way to update them somehow?

Original code

In Obsidian

Many thanks!

[ariehen]

The syntax highlighting in reading view comes from PrismJS (CodeMirror for Live Preview), so I’d think it’s whatever PrismJS have decided for that code language. There are a few plugins (2?) dealing with syntax highlighting in the community gallery, but they look quite old and may not work anymore.

[Tiste_Sg]

Hi @ariehen,
Thanks for the prompt reply!
I understand that PrismJS comes in different themes, is it possible to try the other themes or add my own?
Cheers

[ariehen]

PrismJS is a library Obsidian uses and not a theme. Not to be confused with the Prism theme. Some community themes do change the syntax highlighting on their own.

I’m not sure how you would go about changing the PrismJS highlighting for power query labeled code blocks only, but there are variables in the theme CSS that can alter all code blocks. You could try changing some of these:

body {
  /* Code */
  --code-size: var(--font-smaller);
  --code-background: var(--background-primary-alt);
  --code-normal: var(--text-muted);
  --code-comment: var(--text-faint);
  --code-function: var(--color-yellow);
  --code-important: var(--color-orange);
  --code-keyword: var(--color-pink);
  --code-property: var(--color-cyan);
  --code-punctuation: var(--text-muted);
  --code-string: var(--color-green);
  --code-tag: var(--color-red);
  --code-value: var(--color-purple);
}

CSS snippets - Obsidian Help

---

If all your power query code is in one note, you could look into cssclasses to alter only that note’s code blocks. For example, changing the above CSS to:

body .pq {
    /* styles here */
}

and at line one (in the YAML) of the note you want to change,

---
cssclasses: pq
---

only notes with that pq class will be affected.

[Tiste_Sg]

Thanks for the pointers!

Looking again at the PrismJS library on github, there does seem to be themes available.
prism/themes at master · PrismJS/prism (github.com)

But given your reply I take it there is currently no way in Obsidian to switch between those.

Thanks again for the help!

Cheers