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`に書かれた内容をすべて初期値に上書きすることで解決しました

https://developer.mozilla.org/ja/docs/Web/CSS/initial

まず上書きするための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`の内容は実質無効になります

# 参考

https://code.visualstudio.com/api/extension-guides/markdown-extension

https://github.com/yuru7/vscode-markdown-css