どーも、ぐるたか@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 // 言語に依存しないきれいな 置換 + 引用符 を有効にします。
},
オプションですが、以下の記事が参考になりました！
参考
markdown-itの導入方法 - ROXX(旧SCOUTER)開発者ブログ
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'すると、良いでしょう。
コメントを残す