search

Zachatoo / obsidian-css-editor

Edit CSS snippets in Obsidian.
MIT License
57 stars 2 forks source link

How can you style the editor view? #18

Open holroy opened 6 months ago

holroy commented 6 months ago

I notice there is a lot of changes in the default css code blocks, versus the view which opens using this plugin. Is it possible somehow to make them look more alike?

Zachatoo commented 6 months ago

Depending on which mode you're in, Obsidian uses a different syntax highlighter. In editing mode it uses Codemirror, in reading mode it uses Prism. They both process the CSS differently. Here is a simple example.

Editing mode:

image

Reading mode:

image

It is possible to make them look more alike, but more alike to which one?

Zachatoo commented 6 months ago

Someone else forked this repo and adjusted the styling, if you're looking for inspiration.

erichologist/obsidian-cssEditor

holroy commented 6 months ago

Would it be interesting for you to include a PR that changes the obsidian-theme.ts's file config variable to match the variable names from the Obsidian(?) setup? Like shown below:

image

This would allow for the css-view-editor window to follow the color theme for code blocks as defined in your current theme.

And/or have you considered changing to allow the usage of the Style settings plugin to change these colors? (I'm not entirely sure how well that copes with having the default be another variable, but in other aspects I consider that a viable option for changing CSS stuff to)

Zachatoo commented 6 months ago

Some of them already do match from what I can tell from a quick glance. I'm not opposed to more being added to be fully theme compatible, if possible.

I wasn't aware that Style Settings supported plugins, but a look at the plugin's README tells me it does! That also sounds like an interesting path worth investigating.