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;
  }
}

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