【Nuxt.js】ContentfulのMarkdown形式のブログコンテンツを表示する

Nuxt.js + Contentfulを使ってブログシステムを構築中に
少しつまづいたのでメモ。

やりたいこと
実現方法
まとめ

やりたいこと

ContentfulにはMarkdown形式でブログコンテンツのデータを保存
最終的にブログをhtml形式で表示する
ブログのスタイル（css）をいじれるようにする

実現方法

Markdown形式でブログ内容を登録する
@nuxtjs/markdownitをインストールする
nuxt.config.jsに設定を追加する
$md.render()を使ってhtmlに変換して表示する
ディープセレクタ/deep/を使ってcssを記述する

Markdown形式でブログ内容を登録する

Contentfulのモデル設定だが、
Long Textを選択すると、Markdownの項目が選択できるようになるため
こちらを利用する。

nuxtjs/markdownitをインストールする

公式サイト：https://www.npmjs.com/package/@nuxtjs/markdownit

これはmarkdown形式で書かれた文字列のデータを、
htmlタグに変換してくれる。

$ npm install @nuxtjs/markdownit

vue-markdownというものでも同様の機能を実現できるが
こちらは@nuxtjs/markdownitと比較して
サーバーサイドでレンダリングされないという違いがある。

nuxt.config.jsに設定を追加する

nuxt.config.js

module.exports = {

...

modules: [
    '@nuxtjs/markdownit'
  ],

...

markdownit: {
    injected: true,   // 「$md」でどこからでも使えるようにする
    breaks: true      // 改行を<br/>に変換する
  }
}

$md.render()を使ってhtmlに変換する

Contentfulからは改行のない連続した文字列で送られてくるので

$md.render()を使ってhtml形式に変換
html形式の文字列をv-htmlを使って表示

という手順で画面に表示する。

<template>
  <div class="blog-content" v-html="$md.render(content)"></div>
</template>

<script>
export default {
  data() {
    return {
       // 本来はcontentfulから取得したデータを入れておく
       content: '# 見出し1  ## 見出し２'
    }
  }
}
</script>

ディープセレクタを使ってcssをあてる

v-htmlによってレンダリングされるhtmlには、
スコープ付きcss(scoped)の機能が使えない。

そのため、ディープセレクタを使って
Markdownのテキストにcssを適応する。

<template>
  <div class="blog-content" v-html="$md.render(content)"></div>
</template>

<style lang="scss" scoped>
/deep/ h1 {
  color: red;  /* 色を赤に変更する */
}
</style>