Nuxt.jsでmarkdown-itを利用する

目次

• Nuxt.jsでmarkdown-itを利用する
  • 目次
  • Nuxt.js で markdownit を利用する方法
  • プラグインの作成
  • プラグインの読み込み
  • 利用方法

Nuxt.js で markdownit を利用する方法

Nuxt.js で markdownit を利用する方法は主に２つあると思います

1. nuxtjs/markdownit を利用する
2. plugin を利用してmarkdownitを扱えるようにする

nuxtjs/markdownit を利用する方法については Nuxt.jsでMarkdownで作成可能なブログを作った を参照してください。

普通に使う分には @nuxtjs/markdownit を利用するほうが楽ですが、自前でプラグインを書くことで markdownit のrulesの変更など細かい機能も使えるようになります。

プラグインの作成

markdownitを読み込むために plugin を作成します。
plugins/markdown-it.js の作成

import MarkdownIt from 'markdown-it'

export default ({ app }, inject) => {
  const md = new MarkdownIt({
    langPrefix: 'language-',
    preset: 'default',
    linkify: false,
    breaks: true,
    html: true,
    typegraphy: true,
  }})

  md.use(require('markdown-it-meta'))
  md.use(require('markdown-it-anchor'))

  inject('md', md)
}

このような形でMarkdownItの設定を書いていきます。
MarkdownItの設定を変えたい場合や、拡張を追加で読み込みたい場合はこのファイルを変更していけば良いことになります。

プラグインの読み込み

自分で作ったpluginを読み込ませるために nuxt.config.js の修正を行います

nuxt.config.js

module.exports = {
  // 省略
  /*
  ** Plugins to load before mounting the App
  */
  plugins: ['@/plugins/markdown-it'],
  // 省略
}

利用方法

コンポーネントファイル

<template>
    <div class="ma-4 markdown-body" v-html="$md.render('# タイトル テスト')" />
</template>

作成したpluginによってコンポーネントファイル側から$md.renderを呼べるようになっています。