Monospace font or disable formatting in Source mode

[michaelprescott]

Things I have tried

Reviewed and toggled most settings to get familiar with effects

What I’m trying to do

I like for my Markdown files to be well-formatted and readable as plaintext (in source mode), but also aesthetically rendered (only when in Preview or Read mode). The Live Preview and Reading modes format well-enough to satisfy the latter; however, my intuition or rather expectation is that Source mode would render plaintext, monospaced characters.

For example, # Header 1 is rendered as very large heavy text in Preview, but it is also rendered the same, including the # in Source mode. I tried toggling a variety of settings and it continues to style my source text, which is baffling and disconcerting, especially when it updates styling as I type. Even more, I prefer to have the same number underscores under a header text as there are in the header text. “1234” would have “----” like so,

1234

and it would render with a monospace font in source mode, but render with appropriate aesthetic styling in preview mode.

I hope I’ve described the issue well. It seems like a very logical expectation to me, and since I’m on day 1, hour 1 of evaluating Obsidian, surely I’m missing a setting for enabling this? Can someone guide me to how to enable monospace font and no auto-styling while in edit/source mode?

[michaelprescott]

Source mode:

Preview:

There is hardly any difference. Should Source Mode not be formatted? Can I remove formatting and view as plaintext?

[CawlinTeffid]

You should be able to achieve what you want with CSS snippets. I’m afraid I can’t give detailed instructions, but I’m sure the existing styles have a class to distinguish Source Mode. There are general Obsidian CSS resources in the forum.

Your expectation for Source Mode’s formatting makes sense. Until somewhat recently, Live Preview didn’t exist; there was only Edit (the current Source Mode, with essentially very fancy syntax highlighting but no rendering of images or other embeds) and Preview (if I remember the old names right). So when the developers added Live Preview, I imagine they didn’t consider stripping down Source Mode’s style.

[Angel]

Setext headers have two levels only.

• Equal signs for H1
• Dashes for H2
• Any number of equal signs or dashes in the line directly below the heading text should work, although Obsidian seems to need two dashes (unlike other Markdown editors) for H2

Atx header have six levels, with the levels correlating with the numbers of hashes (#) used.

See Gruber.

The following CSS snippet can be customised to use whatever monospace font you want in source view / live preview.

```CSS
.markdown-source-view.mod-cm6 .cm-scroller {
  font-family: 'Courier New', Courier, monospace;
} 
```

And this snippet can be customised to format headers in source and reading modes:

```CSS
header.cm-header-1, .HyperMD-header-1, .markdown-preview-view h1 {
  font-size: 1.5em;
  color: var(--header);
  font-weight: 400;
  margin: 0px 3px 6px 5px;
}

.cm-header.cm-header-2, .cm-header.cm-header-2, .HyperMD-header-2, .markdown-preview-view h2 {
  font-size: 1.4em;
  color: var(--header);
  font-weight: 400 !important;
  margin: 0px 3px 6px 5px;
}

.cm-header.cm-header-3, .HyperMD-header-3, .markdown-preview-view h3 {
  font-size: 1.3em;
  color: var(--header);
  font-weight: 400 !important;
  margin: 0px 3px 6px 5px;
}

.cm-header.cm-header-4, .HyperMD-header-4, .markdown-preview-view h4 {
  font-size: 1.2em;
  color: var(--header);
  font-weight: 400 !important;
  margin: 0px 3px 6px 5px;
}

.cm-header.cm-header-5, .HyperMD-header-5, .markdown-preview-view h5 {
  font-size: 1.1em;
  color: var(--header);
  font-weight: 400 !important;
  margin: 0px 3px 6px 5px;
}

.cm-header.cm-header-6, .HyperMD-header-6, .markdown-preview-view h6 {
  font-size: 1em;
  color: var(--header);
  font-weight: 400 !important;
  margin: 0px 3px 6px 5px;
}
```

I’m sure some other users will have better CSS snippets than my hacks, but they do work when tried in a test vault.

If you want to see source code when in live-preview mode, you have to toggle it on:

Angel

[michaelprescott]

Thanks all. Following those tips, and some trial and error, I settled on this. The result being all content appears to be using a monospace font in Source mode, and the underscores are of the same font-size as the headers they effect. So, the odd auto-styling in Source mode is no longer apparent.

1. Created a snippets folder in [My Notes]/.obsidian/snippets
2. Added a file named “Monospace Source Mode.css”, the extension .css was significant.
3. Set the following content:

:root {
  --my-font-monospace: 'Andale Mono', monospace;
}

.markdown-source-view {
    font-family: var(--my-font-monospace);
    font-size: 0.9em;
}

.CodeMirror .CodeMirror-line, 
.CodeMirror .CodeMirror-line-like {
  font-family: var(--my-font-monospace);
  font-size: 0.9em;
}