Obsidian CSS snippet to mimic source mode in live preview mode

live_as_source.css

/***
 * Common tweaks 
 ***/

/* Using the Github Theme with a few tweaks */
.theme-dark {
  --background-primary: #1f1f1f;
}

/* display headings with normal font size */
.cm-s-obsidian .HyperMD-header,
.cm-s-obsidian span.cm-formatting-link {
  font-size: var(--font-text-size);
  color: #569cd6;
}

.cm-s-obsidian .cm-line.HyperMD-header {
  padding-top: var(--size-2-1);
}

/* don't indent code blocks */
.markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock {
  padding-left: 0;
}

/* display hashtags with normal font size */
.cm-hashtag {
  font-size: var(--font-text-size);
}

/* display headings as in source mode */
/* adapted from https://gist.github.com/pmbauer/7395acded3bf74d41fe70a2e70d7952a#file-pseudo_focus-css-L11-L40 */
.is-live-preview {
  & .cm-header::before {
    position: relative;
    bottom: 0px;
  }

  & .HyperMD-header-1.cm-line:not(.cm-active)::before {
    content: "# ";
  }
  & .HyperMD-header-2.cm-line:not(.cm-active)::before {
    content: "## ";
  }
  & .HyperMD-header-3.cm-line:not(.cm-active)::before {
    content: "### ";
  }
  & .HyperMD-header-4.cm-line:not(.cm-active)::before {
    content: "#### ";
  }
  & .HyperMD-header-5.cm-line:not(.cm-active)::before {
    content: "##### ";
  }
  & .HyperMD-header-6.cm-line:not(.cm-active)::before {
    content: "###### ";
  }

  /* hide the automatically inserted heading in live preview */
  /* move it out of the viewport instead of display:none */
  & .cm-line > .cm-formatting-header {
    position: absolute;
    left: -999px;
  }

  /* only first header element gets the prefix */
  & .cm-header:not(.cm-formatting-header) ~ .cm-header::before {
    display: none;
  }

  /* display urls in same color as text but with underline */
  & .cm-url {
    color: var(--text-normal);
    text-decoration-line: var(--link-external-decoration-hover);
  }

  & span.cm-url {
    color: var(--text-normal);
    text-decoration-line: var(--link-external-decoration-hover);
  }

  /* display code blocks with same font size and background color as source mode */
  & span.cm-inline-code {
    font-size: var(--font-text-size);
    background-color: var(--background-primary);
  }
  & div.HyperMD-codeblock-bg {
    background-color: var(--background-primary);
  }

  /* don't hide backquotes */
  & span.cm-inline-code:not(.cm-formatting, :has(+ .cm-formatting))::before {
    content: "`";
  }
  & span.cm-inline-code:not(.cm-formatting, :has(+ .cm-formatting))::after {
    content: "`";
    padding-left: 3px;
  }
  /* adjust margins to prevent relayout */
  .cm-inline-code:not(.cm-formatting) + .cm-inline-code.cm-formatting {
    margin-right: 3px;
    padding-left: 0px;
  }
  .cm-inline-code.cm-formatting:not(:has(.cm-formatting)) {
    margin-left: 3px;
  }
}

/***
 * Only for desktop app since there are problems 
 * with the `.has()` selector interacting with the live editing
 ***/

body:not(.is-mobile) {
  .cm-s-obsidian {
    /* display urls in same color as text but with underline */
    & .cm-url {
      color: var(--text-normal);
      text-decoration-line: var(--link-external-decoration-hover);
    }

    & span.cm-url {
      color: var(--text-normal);
      text-decoration-line: var(--link-external-decoration-hover);
    }

    /* display code blocks with same font size and background color as source mode */
    & span.cm-inline-code {
      font-size: var(--font-text-size);
      background-color: var(--background-primary);
    }
    & div.HyperMD-codeblock-bg {
      background-color: var(--background-primary);
    }

    & .HyperMD-codeblock {
      font-size: var(--font-text-size);
    }
    & .cm-active.HyperMD-codeblock-begin::before {
      content: "";
    }
    & .cm-active.HyperMD-codeblock-end::after {
      content: "";
    }

    /* Weeeee */
    & .HyperMD-codeblock-begin:not(:has(> .cm-formatting-code-block))::before {
      content: "```";
    }
    & .HyperMD-codeblock-end:not(:has(> .cm-formatting-code-block))::after {
      content: "```";
    }
  }

  /* display copy-paste flair close to code block language identifier */
  .markdown-source-view.mod-cm6 .code-block-flair {
    font-family: var(--font-text-family);
    font-size: var(--font-text-size);
    right: unset;
    padding: 0;
    top: 0px;
  }
}

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!):

obsidian_codeblocks.mov

Oopsie, creating new headings is broken 😓

UPDATE: I tried to remove the flashing header when entering and leaving header editing from the original gist, but I didn't test header creation.
UPDATE 2: It also doesn't work properly on the mobile app (after enabling sync of theme snippets).
UPDATE 3: Both are fixed now.

Fixed it by moving the cm-formatting-header out of the view port instead of using display: none;

  /* hide the automatically inserted heading in live preview */
  & .cm-line > .cm-formatting-header {
    position: absolute;
    left: -999px;
  }

My attention to detail is a bit unhappy with the fact that the caret is hidden just after entering # then [space] and only reappears when entering the next character... but I'll live.

Seems that maybe the .has() is not too happy on mobile, maybe because of the interaction with the live editing of code blocks (which seems a bit laggy on ios. So for now I've only enabled the code block overrides for the desktop app.

Added small tweaks for inline code blocks to make them not relayout when switching in and out of them.