Tired of ~~ striking out your text? Why on earth would you want ## h2s to be bigger than #### h4s? Your #tags getting a little round in the mid-section? Why do those [[links]] have a color anyway? Who wants that? Well, this snippet is for you. I present to you:
MarkGone
Like Dignam in The Departed, MarkGone is a ghost in the wind waiting for you when come home with the groceries. No, it’s not that. Just kidding. I imagine it sporting a slick track-suit though.
A few folks:
asked recently about a bare-bones editor mode devoid of any and all Markdown and editor styling. This is an attempt of that.
- Put together using the default theme, but looks mostly alright with the few other themes I checked
- Switch to Source mode for MarkGone™©® Experience℠
- A few variables are at the top in
body to change as you’d like
%%comments%% are untouched, but we could do something silly with them if we wanted to… 
- Safety not guaranteed
Source mode:
Live Preview:
body {
--heading-size: inherit;
--heading-line-height: 1em;
--list-indent-s: 1em;
--font-weight-s: 400; }
/*- monospace font for source mode -*/
.markdown-source-view:not(.is-live-preview) .cm-scroller {
--font-text: 'JetBrains Mono', var(--font-monospace); }
/*- inline title -*/
.markdown-source-view:not(.is-live-preview) .inline-title {
font-size: inherit;
font-weight: var(--font-weight-s); }
/*- all headings: size -----------------------------------------------*/
.markdown-source-view:not(.is-live-preview) .HyperMD-header {
font-size: var(--heading-size); }
/*- all headings: font weight -*/
.markdown-source-view:not(.is-live-preview) .HyperMD-header {
font-weight: var(--font-weight-s); }
/*- all headings: line height -*/
.markdown-source-view:not(.is-live-preview) .HyperMD-header {
line-height: var(--heading-line-height); }
/*- lists -----------------------------------------------*/
/* indents within lists */
.markdown-source-view:not(.is-live-preview) .cm-line.HyperMD-list-line {
tab-size: var(--list-indent-s); }
/*- adjust ul-ol-task indents */
.markdown-source-view.mod-cm6:not(.is-live-preview)
:is(.cm-formatting-list-ul, .cm-formatting-list-ol) {
padding-inline-start: 0px; }
/*- markdown elements -----------------------------------------------*/
.markdown-source-view:not(.is-live-preview) :is(.cm-formatting-header, .cm-formatting-list, .cm-formatting-list-ol, .cm-formatting-link, .cm-math) {
color: var(--text-normal);
font-size: inherit; }
/*- bold/italic/bold+italic font weight -*/
.markdown-source-view:not(.is-live-preview) :is(.cm-strong, .cm-em, .cm-em.cm-strong) {
font-weight: var(--font-weight-s); }
/*- no italic style -*/
.markdown-source-view:not(.is-live-preview) :is(.cm-em, .cm-strong, .cm-em.cm-strong) {
font-style: normal; }
/*- ==highlight== color -*/
.markdown-source-view:not(.is-live-preview) .cm-highlight {
background-color: transparent; /* <rgb(211,211,211)> for a color */
font-weight: var(--font-weight-s); }
/*- strikethrough -*/
.markdown-source-view:not(.is-live-preview) .cm-strikethrough {
text-decoration: none; }
/*- internal links ----------------------------------------------*/
.markdown-source-view:not(.is-live-preview) :is(.cm-hmd-internal-link, .cm-hmd-internal-link:hover, .cm-hmd-barelink) {
color: var(--text-normal);
font-weight: var(--font-weight-s);
text-decoration: none; }
/*- external links ----------------------------------------------*/
.markdown-source-view:not(.is-live-preview) :is(.cm-link, .cm-link:hover, .cm-url, .cm-url:hover) {
color: var(--text-normal);
font-weight: var(--font-weight-s);
text-decoration: none; }
/*- blockquotes ----------------------------------------------*/
.markdown-source-view:not(.is-live-preview) .cm-quote {
color: var(--text-normal); }
/*- tags --------------------------------------------------------*/
.markdown-source-view:not(.is-live-preview) .cm-hashtag {
color: var(--text-normal);
font-size: inherit; }
.markdown-source-view:not(.is-live-preview) :is(.cm-hashtag.cm-hashtag-begin, .cm-hashtag.cm-hashtag-end) {
background-color: inherit;
padding-right: 0em;
padding-left: 0em; }
/*- code --------------------------------------------------------*/
.markdown-source-view:not(.is-live-preview) .cm-inline-code {
color: inherit;
background-color: inherit;
font-size: inherit;
font-family: inherit; }
.markdown-source-view.mod-cm6:not(.is-live-preview) .cm-line.HyperMD-codeblock {
padding-left: 0px;
background-color: transparent;
font-size: inherit;
font-family: inherit; }
.markdown-source-view:not(.is-live-preview) .HyperMD-codeblock > * {
color: var(--text-normal); }
/*- remove cm-math styling -*/
.markdown-source-view:not(.is-live-preview) :is(.cm-math, .hmd-fold-math-placeholder) {
font-size: inherit;
font-style: normal; }
/*--------------------------------------------------------------------------------*/
/*- hide collapse icon -*/
.markdown-source-view:not(.is-live-preview) .cm-fold-indicator {
display: none; }
/*- hide indentation guides -*/
.markdown-source-view:not(.is-live-preview) .cm-indent::before {
display: none;
}
/*- hide "open link" popover on mobile -*/
.markdown-source-view:not(.is-live-preview) .follow-link-popover {
display: none; }
inspiration for the silly intro from:
10 Likes
Hi. Thanks for this! I wonder how you can customize the source mode font. I tried replacing “JetBrains Mono” with some other font found in this list but the font remains unchanged. I think the problem comes down to how to add support for a font that one wants to use in Obsidian.
The font in the first slot here needs to be installed on your system. So, install it however you’d normally install fonts, restart Obsidian, and replace JetBrains Mono with the exact name of the font you installed and want to use.
As I said in the post that brought me here congratulations indeed and thank you for this snippet.
Just a few things.
I see that there is still a style in some situations.
- When you go with the mouse over a heading it appears symbol to expand or collapse the paragraph. It also appears in the points of a list with indentation.
- The points in a list with indentation also show vertical lines
- The syntax “====” still shows a color that also makes what is underlined unreadable
Another thing I didn’t understand is, as a single font for everything do I have to use a monospace font?
If I want to for example use “Roboto” regular font should I write it like this?
/*- monospace font for source mode -*/
.markdown-source-view:not(.is-live-preview) {
--font-text: 'Roboto', var(--font-monospace); }
You could try adding these:
/*- hide collapse icon -*/
.markdown-source-view:not(.is-live-preview) .cm-fold-indicator {
display: none; }
/*- hide indent lines -*/
.markdown-source-view:not(.is-live-preview) .cm-indent::before {
display: none; }
As you’re using a dark theme, replace rgb(211,211,211) with transparent (or a different color) in the highlight section.
For the font, this section .markdown-source-view:not(.is-live-preview) { --font-text: just overrides the default or whatever you’ve set
in Settings > Appearance for source mode only. So you could put Roboto there, or just comment out that section to control the font for source/live preview/editing views in Obsidian’s Settings.
Regarding how to install fonts on your system, you can do it using Homebrew. Check this blog post
Thank you very much indeed. This is all so useful that it should not be just a snippet. This needs to become an official Obsidian feature, really. Editing a markdown note on mobile in source mode with all those styles makes writing a delirium…
There is always something trying to interpret what you write to enlarge it, change it, move it… It doesn’t make sense. That has to be the exclusive job of the “Reading View.”
Anyway, at the moment I’m having problems because my pre-existing snippet that controls the style for the whole live preview or reading mode part conflicts with yours in certain places. But I’m trying to keep this problem to myself.
As for the completeness of your script on the other hand, because I think it only makes sense if it really removes all the styles, I think it’s still missing:
If or when I find some other styles somewhere I will point them out to you
I knew someone was going to mention the underline for links. I didn’t change it on purpose, but you could add this (the text-decoration parts) to the links section to take care of that.
/*- internal links ----------------------------------------------*/
.markdown-source-view:not(.is-live-preview) :is(.cm-hmd-internal-link, .cm-hmd-internal-link:hover, .cm-hmd-barelink) {
color: var(--text-normal);
font-weight: var(--font-weight-s);
text-decoration: none; }
/*- external links ----------------------------------------------*/
.markdown-source-view:not(.is-live-preview) :is(.cm-link, .cm-link:hover, .cm-url, .cm-url:hover) {
color: var(--text-normal);
font-weight: var(--font-weight-s);
text-decoration: none; }
I don’t see the “Open link” pop-up on the desktop, but yeah, it’s there on mobile. Try adding this (anywhere in the original is fine):
.markdown-source-view:not(.is-live-preview) .follow-link-popover {
display: none; }
For fonts on mobile, you need to install them before Obsidian can use them. Lots of ways to do it depending on iOS or Android. You could also link to them by adding the following at the very top of the snippet (not sure if this works if you’re offline):
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');
Yeah, this is the tricky part. You could play around with the commented out “DON’T USE THIS NEGATIVE MARGIN HACK” part. I take another look at it though.
Writing two $$ will get formatted. Also when writing headings the linespacing and character spacing will change. This can be observed when writing ###### (=heading) and ####### (not heading). There is also a style change when going from ### to ####.
It’s funny how hard it is to get rid off every formatting completely 
Yes that’s why it’s a nonsense to go crazy having to remove something that should simply be allowed not to turn on. It’s like having to turn on air conditioner cause you can’t turn off the radiator…
Thanks all for the feedback.
I’ve updated the original to include some bits that slipped through. I tried to add clear comments to the sections, so if someone wants to adjust only one or two of the stylings, it should be easy to just snip that section out. Have fun!
1 Like
Thanks. There is no fix for writing symbols repeatably (one of # $ * - _ + ; . , / \ ! < >)? Most notably # and $, other symbols behave differently.
I also noticed that the search file menu (search current file) uses font specified in “monospace font for source mode”. Could you fix that? Maybe you could separate it to search box text and button font (or just disable custom font in the search box).
One more thing: if Templater is enabled, writing <% will initiate a Templater code block which has its own coloring.
All right, I finally got around to tailoring this for me — now source mode is easier to distinguish!
1 Like
