Markdown formatting characters in Live Preview

I’m relatively new to Obsidian, but I’m falling in love quickly—especially because it looks like I can (maybe) write a plugin to finally get what I’ve always wanted in a Markdown editor. I’ve used everything from Bear to Notational Velocity to Simplenote to, and my goal is somewhere between all of them:

I want to view my entire note in beautiful Live Preview mode, but I want to render the line I’m currently editing as the markdown source: Monospaced font with no ornamentation, and all Markdown formatting characters visible and selectable.

That means two specific things to the current line ( .cm-active) in Live Preview mode:

  • Reset all of the styling (font sizes, colors, bold/italic, proportional vs monospaced font) to a single monospaced font.
  • Show all of the markdown formatting characters, regardless of where the cursor is within the line.

For the first one, I was able to add some CSS properties from this post to .cm-active to get the visuals close enough to what I want.

The Markdown formatting characters are trickier. For example, this sentence with an inline code block:

This is a sentence with `inline code` and more content afterward.

In Live Preview, the backtick characters will be hidden anytime the cursor is in the “This is a sentence with” or “and more content afterward.” parts. When I move the cursor inside the words “inline code”, the backticks reappear.

Unfortunately it doesn’t look like it’s CSS rules hiding and showing the backticks; rather, when I watch the Web Inspector while I move the cursor around, I can see <span>\` elements appear and disappear in the DOM. That suggests to me it’s HyperMD and/or CodeMirror 6 adding and removing the elements.

Is there a way for me to configure HyperMD or CodeMirror 6 to show those Markdown formatting characters for a particular line? Or is there a way for me to convince Obsidian to use “Source Mode” instead of “Live Preview” for just a specific line in a viewport?

Thanks in advance for any help or ideas!

1 Like