Buefy(Bulma) と github-markdown の共存

Markdownで記述したファイルをVueに取り込むことに成功しました。

ですが、Buefyを基本としたサイトになっているので、Reset CSSが有効なためMarkdownで出力されたh1など、CSS クラスではなくタグでレイアウトを表現したいものが無効になっています。
h1タグで大きくタイトルとして扱ってほしいのに通常の文章と変わりない仕上がりになってしまいます。

github の Markdown スタイルを使う

まずは使いたい CSS 定義を持ってきます。
今回はsindresorhus/github-markdown-cssを利用させていただきます。

npmパッケージとして公開されているのでインストールします。

yarn add github-markdown-css  

インストールできたらnuxt.config.jsのcss項目に追加します。
Buefyのスタイルよりも優先させたいので、後に記述します。

// githubのスタイルはbuefyよりも後に指定する  
export default {  
  css: ['~/assets/css/buefy.scss', 'github-markdown-css']  
}  

Markdown の文章を.markdown-body 内に納める

さて、このgithub-markdown-cssですが、.markdown-bodyクラスの子孫要素に効くように設定されています。
なので読み込んだMarkdown文書の外側に.markdown-bodyのクラスが当たるように記述します。

// markdownをhtmlに展開したものは`.markdown-body`内に置く  
.markdown-body(v-html="html")  

これでh1タグが大きく表示されるようになって見栄えが良くなりました。

足りない分は追加で。

だいたい良くなったのですが、liタグにマーカーがないままです。
ないものは足せばいいので、追加しました。

// md中のulリストに印をつける  
.markdown-body {  
  ul > li {  
    list-style-type: disc;  
  }  
}  

これで思い通りのページスタイルになりました！