Plugin/theme for plain editing view source mode text

[sangkalputung]

Good day everyone,

I am trying to find a theme or plugin that can make the style of the source mode’s editing view closely resembles a code editor. That is, I want to make the texts monospace, and have the lists and the headers to not have any additional indentations, just a dash and a space character (for the lists) and just a hashtag and a space character (for heading 1). I also want to make the line height consistent at all times.

The things I have tried were editing the .css file of a sample theme, in which I gave up quickly, and tried using the minimal theme and edited the settings via the minimal theme’s plugin, which I also gave up because the options are just not detailed enough. Does anyone know a theme or plugin that can achieve this?

[ariehen]

This gets it pretty close. I may have missed a few spots, but give it a try. Switch to editing Source mode, and change the font to your liking.

/*- all things equal -*/
body {
  --h1-size: 1em;
  --h2-size: 1em;
  --h3-size: 1em;
  --h4-size: 1em;
  --h5-size: 1em;
  --h6-size: 1em;

  --h1-line-height: 1.2;
  --h2-line-height: 1.2;
  --h3-line-height: 1.2;
  --h4-line-height: 1.2;
  --h5-line-height: 1.2;
  --h6-line-height: 1.2;

  --list-indent: 1em;

  --h1-weight: 600;
  --bold-weight: 600;

  --link-color: var(--text-normal);
  --link-color-hover: var(--text-normal);
  --link-external-color: var(--text-normal);
  --link-external-color-hover: var(--text-normal);
  --link-unresolved-color: var(--text-normal);

  --tag-color: var(--text-normal);

  --text-highlight-bg-rgb: 192,192,192;
 
  --code-normal: var(--text-normal);
  --code-comment: var(--text-normal);
  --code-function: var(--text-normal);
  --code-important: var(--text-normal);
  --code-keyword: var(--text-normal);
  --code-operator: var(--text-normal);
  --code-property: var(--text-normal);
  --code-punctuation: var(--text-normal);
  --code-string: var(--text-normal);
  --code-tag: var(--text-normal):
  --code-value: var(--text-normal);
  --code-background: none;
}

/*- no color for numbers in code blocks -*/
.markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock > *, 
.token.number {
  color: var(--text-normal);
}

/*- no italic style -*/
.cm-em, em {
  font-style: normal;
  font-weight: 600;
}

/*- monospace font for all editor views -*/
.markdown-source-view.mod-cm6 .cm-scroller, .markdown-preview-view {
  font-family: 'JetBrains Mono'; 
}

UPDATE1: Added rules to remove link and code block colors as well as bold & italic styling.
UPPDATE2: Removed tag color; still a pill shape.

---

CSS snippets - Obsidian Help

[OlivierPS]

I think the theme I developed — Olivier’s Theme — should please you !
It can be configured as per your request. I’ve quickly set it up so you can have an amber version in light mode and a green version in dark mode :

Here’s the code you can import by copy-pasting into the proper place in the “Style Settings” plugin.

{
  "Olivier-s-Theme@@OT-headings-scaling": "headings-scaling-minor-second",
  "Olivier-s-Theme@@OT-kanban-font": "IBM Plex Serif",
  "Olivier-s-Theme@@OT-generalPalette": "generalPalette-OBSIDIAN",
  "Olivier-s-Theme@@OT-accentColor-lightMode": "accentColor-lightMode-shade",
  "Olivier-s-Theme@@OT-TextColor-lightMode": "textColor-lightMode-amber",
  "Olivier-s-Theme@@OT-pageBackground-lightMode": "pb-lm-blackPaper-1",
  "Olivier-s-Theme@@OT-inkColor-lightMode": "inkColor-lightMode-amber",
  "Olivier-s-Theme@@OT-editingBackgroundColor-lightMode": "editingBackgroundColor-lightMode-black",
  "Olivier-s-Theme@@OT-textColor-darkMode": "textColor-darkMode-terminalGreen",
  "Olivier-s-Theme@@OT-editMode-font": "IBM Plex Mono",
  "Olivier-s-Theme@@OT-editMode-line-width": 50
}

After you have pasted the code, either restart Obsidian or “Force reload” you vault (it’s in the “View” menu).

Have fun !

Olivier :-{)