VSCodeでMarkdownの拡張機能を作ったら、プレビューが崩れて表示されたので対処する

VSCodeでMarkdownのプレビュー機能を利用した拡張機能の開発を行っていた際、
プレビューの表示が崩れてしまったのでその際の解決法を紹介します

デフォルトのCSS

MarkdownのプレビューにはVSCode側でCSSが用意されており、
そちらと競合が発生していると表示が崩れてしまう

Windowsの場合は以下のパスにデフォルトCSSが存在します
C:\Users\自身のユーザー名\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\markdown-language-features\media\markdown.css

競合の解消

initialを利用することでmarkdown.cssに書かれた内容をすべて初期値に上書きすることで解決しました

まず上書きするためのCSSを用意します
すべての内容を上書きしたくない場合は適宜内容を削ってください
このCSSはチャットAIを用いて作成したものなので、その点はご了承ください

style.css

html, body {
    font-family: initial;
    font-size: initial;
    padding: initial;
    line-height: initial;
    word-wrap: initial;
  }
  
  body {
    padding-top: initial;
  }
  
  h1, h2, h3, h4, h5, h6,
  p, ol, ul, pre {
    margin-top: initial;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-weight: initial;
    margin-top: initial;
    margin-bottom: initial;
    line-height: initial;
  }
  
  #code-csp-warning {
    display: none;
  }
  
  body.scrollBeyondLastLine {
    margin-bottom: initial;
  }
  
  body.showEditorSelection .code-line {
    position: initial;
  }
  
  body.showEditorSelection :not(tr,ul,ol).code-active-line:before,
  body.showEditorSelection :not(tr,ul,ol).code-line:hover:before {
    content: initial;
    display: initial;
    position: initial;
    top: initial;
    left: initial;
    height: initial;
  }
  
  body.showEditorSelection li.code-active-line:before,
  body.showEditorSelection li.code-line:hover:before {
    left: initial;
  }
  
  .vscode-light.showEditorSelection .code-active-line:before,
  .vscode-light.showEditorSelection .code-line:hover:before,
  .vscode-dark.showEditorSelection .code-active-line:before,
  .vscode-dark.showEditorSelection .code-line:hover:before,
  .vscode-high-contrast.showEditorSelection .code-active-line:before,
  .vscode-high-contrast.showEditorSelection .code-line:hover:before {
    border-left: initial;
  }
  
  sub,
  sup {
    line-height: initial;
  }
  
  ul ul:first-child,
  ul ol:first-child,
  ol ul:first-child,
  ol ol:first-child {
    margin-bottom: initial;
  }
  
  img, video {
    max-width: initial;
    max-height: initial;
  }
  
  a {
    text-decoration: initial;
  }
  
  a:hover {
    text-decoration: initial;
  }
  
  a:focus,
  input:focus,
  select:focus,
  textarea:focus {
    outline: initial;
    outline-offset: initial;
  }
  
  p {
    margin-bottom: initial;
  }
  
  li p {
    margin-bottom: initial;
  }
  
  ul,
  ol {
    margin-bottom: initial;
  }
  
  hr {
    border: initial;
    height: initial;
    border-bottom: initial;
  }
  
  h1 {
    font-size: initial;
    margin-top: initial;
    padding-bottom: initial;
    border-bottom-width: initial;
    border-bottom-style: initial;
  }
  
  h2 {
    font-size: initial;
    padding-bottom: initial;
    border-bottom-width: initial;
    border-bottom-style: initial;
  }
  
  h3 {
    font-size: initial;
  }
  
  h4 {
    font-size: initial;
  }
  
  h5 {
    font-size: initial;
  }
  
  h6 {
    font-size: initial;
  }
  
  table {
    border-collapse: initial;
    margin-bottom: initial;
  }
  
  th {
    text-align: initial;
    border-bottom: initial;
  }
  
  th,
  td {
    padding: initial;
  }
  
  table > tbody > tr + tr > td {
    border-top: initial;
  }
  
  blockquote {
    margin: initial;
    padding: initial;
    border-left-width: initial;
    border-left-style: initial;
    border-radius: initial;
  }
  
  code {
    font-family: initial;
    font-size: initial;
    line-height: initial;
  }
  
  body.wordWrap pre {
    white-space: initial;
  }
  
  pre:not(.hljs),
  pre.hljs code > div {
    padding: initial;
    border-radius: initial;
    overflow: initial;
  }
  
  pre code {
    display: initial;
    color: initial;
    tab-size: initial;
    background: initial;
  }
  
  pre {
    background-color: initial;
    border: initial;
  }
  
  .vscode-high-contrast h1 {
    border-color: initial;
  }
  
  .vscode-light th {
    border-color: initial;
  }
  
  .vscode-dark th {
    border-color: initial;
  }
  
  .vscode-light h1,
  .vscode-light h2,
  .vscode-light hr,
  .vscode-light td {
    border-color: initial;
  }
  
  .vscode-dark h1,
  .vscode-dark h2,
  .vscode-dark hr,
  .vscode-dark td {
    border-color: initial;
  }

作成したCSSをpackage.jsonで読み込みます

package.json

{
  "contributes": {
    "markdown.previewStyles": [
      "./style.css"
    ],
  }
}

これでmarkdown.cssの内容は実質無効になります

参考