【Nuxt】@nuxtjs/markdownitでマークダウンからhtmlに生成する方法

どーも、ぐるたか@guru_takaです。

Contentfulから取得したマークダウンのテキストをhtml化するため、@nuxtjs/markdownitを利用しました。
Contentfulとは?ヘッドレスCMSって何?誰でもわかるように解説してみる

備忘録もかねて、やり方もまとめておきます。

参考 modules/packages/markdownit 参考 @nuxtjs/markdownit - npm

手順

STEP.1
nuxtjs/markdownitのインストール
STEP.2
nuxt.config.jsの編集
STEP.3
$md.renderでhtml化

STEP1:nuxtjs/markdownitのインストール

コマンドライン
$ npm install @nuxtjs/markdownit --save   

STEP2:nuxt.config.jsの編集

以下の記事が非常にわかりやすく、そのまま引用します!

参考 vue-markdownをやめて nuxtjs/markdownitを利用する
uxt.config.js
modules: [
    '@nuxtjs/markdownit'
  ],
  markdownit: {
    injected: true, // $mdを利用してmarkdownをhtmlにレンダリングする
    breaks: true, // 改行コードを
に変換する
    html: true, // HTML タグを有効にする
    linkify: true, // URLに似たテキストをリンクに自動変換する
    typography: true // 言語に依存しないきれいな 置換 + 引用符 を有効にします。
  },

STEP3:$md.renderでhtml化

あとは、マークダウンのテキストを以下のように渡せばOKです!

htmlファイル
<div v-html="$md.render('html化したいマークダウンのテキスト')"></div>
注意
ESLintにて、vue/no-v-htmlの警告がでます。
// eslint-disable-next-lineや、.eslintrc.jsのルールで'vue/no-v-html': 'off'すると、良いでしょう。

コメントを残す