Markdown formatting characters in Live Preview

Developers: Plugin & API
1

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!

4 Likes
2

Did you ever figure this out? I want to see the header dashes ALL the time in live preview mode, but I do not know how to do it.

3

Since we don’t have direct access to Obsidian’s built-in editor extensions that are used in Live preview, it would be not easy to implement this in a “clean” way.

One of the dirty solutions would be using a view plugin with replace decorations.

This view plugin would replace active line with a widget that looks something like the following:

class SourceWidget extends WidgetType {
    constructor(public lineText: string) {
        super();    
    }
    toDOM(view: EditorView) {
        return createSpan({text: this.lineText, cls: 'whatever-classname'});
    }
}