pseudo_focus.css

body {
  /* [...] redacted customizations [...] */
  --file-margins: var(--size-4-5);
}


.cm-vimCursorLayer {
    animation: none !important;
}

/* ───────────────────────────────────────────────── */
/* <<< LP Heading Level Indicator
/* (cribbed from Shimmering Focus)
──────────────────────────────────────────────────── */
.is-live-preview .cm-header::before {
    font-family: var(--font-monospace);
    font-size: 0.8rem;
    font-style: normal;
    line-height: 1em;

    color: var(--text-muted);

    position: relative;
    bottom: 1px;
    left: -2px;

    padding-right: 4px;
    padding-left: 4px;
}

.is-live-preview .cm-line:not(.cm-active) > .cm-header-1::before { content: "H1" }
.is-live-preview .cm-line:not(.cm-active) > .cm-header-2::before { content: "H2" }
.is-live-preview .cm-line:not(.cm-active) > .cm-header-3::before { content: "H3" }
.is-live-preview .cm-line:not(.cm-active) > .cm-header-4::before { content: "H4" }
.is-live-preview .cm-line:not(.cm-active) > .cm-header-5::before { content: "H5" }
.is-live-preview .cm-line:not(.cm-active) > .cm-header-6::before { content: "H6" }

.is-live-preview .cm-header ~ .cm-header::before {
    display: none; /* only first header element gets the prefix */
}

/* ───────────────────────────────────────────────── */
/* << Active Line Highlight
/* (cribbed from Shimmering Focus)
──────────────────────────────────────────────────── */
.cm-active:not(.cm-gutterElement),
.CodeMirror-activeline .CodeMirror-linebackground {
    background-color: var(--background-modifier-hover);
    border-radius: 4px;
}

I hesitate to share only because this is the pseudoest of pseudo shimmering foci possible and no way a substitute for Chris's great work. This gives you a basic active line highlight + heading level indicators. Many many apologies to Chris.

Credit: https://github.com/chrisgrieser/shimmering-focus

Hey, PMBauer! I so wanted the live preview in Obsidian to show the hash header icons, and I tried and tried without success. Then I came across https://forum.obsidian.md/t/how-to-enable-showing-the-headers-in-default-editor/42655/4 and came here because of your post. Thank you SOOOooooo much for your post there and here. Because of you I have been able to get Obsidian to have much of the look I want (Markdown # icons to show, which I could do with source view, but source view takes away the compact view of Wikilinks. Your solution let me have the # icons of source view in live preview and the Wikilink compact view of Live Preview at the same time, which is great. So big thanks to you!

Thanks @pmbauer for the inspiration... Went down the rabbit hole and came up with this fork :) https://gist.github.com/jmatsushita/ff53393057982216260404abebc003bf?permalink_comment_id=4780082#gistcomment-4780082

The idea is to mimic my VScode settings (or Obsidian's Source mode) in Obsidian's Live Preview mode. As I prefer the interface to not jump over to much when I enter or leave smart previewing spans.

I didn't find that I needed bold and emphasis to be treated the same way, but I did go the extra mile to make code blocks behave nicely (a matter of taste of course!):