How can you style the editor view?

[holroy]

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]

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:

Reading mode:

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

[Zachatoo]

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

erichologist/obsidian-cssEditor

[holroy]

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:

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]

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.

[Zachatoo]

@cinnabar777 Can you create new issue, and include a screenshot and theme you're using?

[DmitriyChrist]

My version of the editor design.
It turned out quite nice

.workspace-leaf-content[data-type="css-editor-view"] .cm-line {
 /*Text like text editor*/
 /* font-family: var(--font-text);
  font-size: var(--font-text-size);*/
  /*Text like code-block*/
  font-family: var(--font-monospace);
  font-size: var(--code-size);
}

/*styles for numberline*/
.cm-lineNumbers .cm-gutterElement {
  font-size: var(--font-ui-smaller) !important;
  font-family: var(--font-monospace) !important;
  color: var(--text-faint) !important;
  /*color: yellow !important;*/
}

/*styles for active*/
.cm-gutterElement.cm-activeLineGutter,
.cm-gutterElement.cm-active {
  color: red !important;
}

Used the theme’s default values.
Also made the line numbers consistent between the editor and the CSS Editor