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 Craft.app, 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 (
body.active-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
body.active-line .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!