Psuedo Live Markdown with CSS

Hi all,
I love obsidian but hate the raw markdown look (sorry!) I couldn’t stand looking at the headers so I did something kinda (very) hacky with the CSS and made them kinda disappear.

I wrote the code for the default theme, but you may have to change the values to fit your theme. The color in the first line you want to be something very close to your background color, and the margins you want to adjust depending on your font-size. If you need to eyeball it put a border box around the CodeMirror-lines and just do trial error, saving the CSS and refreshing the page.

ezgif.com-video-to-gif (1)

/*Psuedo-live markdown - makes #s disappear */

.cm-formatting-header {
color: #2a2a2a;
}

.cm-header-1 {
margin-left: -27px;
}

.cm-header-2 {
margin-left: -35.5px;
}

.cm-header-3 {
margin-left: -39.5px;
}

.cm-s-obsidian pre.HyperMD-header {
padding-left: 1.5px !important;
}

2 Likes

@ishgunacar: Nice. But why hide only headers, not more of some of that kind of stuff? Here is a post with code to “remove clutter”.

@Klaas Although this has its downsides (namely, when highlighting there is an “overlap” of the text on top of the hidden hashes) its easier for me to interact with it since it doesn’t make the text jump around like the other one does because of the highlighting bug since with this hack, you can kinda see what you’re highlighting behind it as well when you need to make edits. Definitely not perfect!