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

Nuxt.js + Contentfulを使ってブログシステムを構築中に

少しつまづいたのでメモ。

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

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

Contentfulのモデル設定だが、

Long Textを選択すると、Markdownの項目が選択できるようになるため

こちらを利用する。

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

これはmarkdown形式で書かれた文字列のデータを、

htmlタグに変換してくれる。

$ npm install @nuxtjs/markdownit

vue-markdownというものでも同様の機能を実現できるが

こちらは@nuxtjs/markdownitと比較して

サーバーサイドでレンダリングされないという違いがある。

nuxt.config.js

module.exports = {

...

modules: [
    '@nuxtjs/markdownit'
  ],

...

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

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

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

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

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

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

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>

• @nuxtjs/markdownitを使うとSSRできる
• nuxt.config.jsに設定値を追加する
• v-htmlを使ってレンダリングされたものにはディープセレクタを使ってcssをあてる