Nuxt.js×markdown-itで記事を表示する方法

今回は、Nuxt.js×markdown-itで記事を表示する方法を解説しています。 markdown-itを使用すると、取得したMarkdownデータを簡単に変換することができます。

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

@nuxtjs/markdownitをインストールします。 markdown-it/markdown-itを拡張したNuxtモジュールです。

yarn add @nuxtjs/markdownit

nuxt.config.jsの設定

nuxt.config.jsにmarkdow-itのオプションを書いていきます。

{
  modules: [
    '@nuxtjs/markdownit'
  ],
  markdownit: {
    injected: true // $md.render()がグローバルで使えるようになる
  }
}

VueファイルでMarkdownを変換する

injected: trueを設定したので、Vueファイルで変換する準備ができました。 v-html="$md.render()"で変換を行います。

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

<script>
export default {
  data() {
    return {
      markdown: '# Hello World!'
    }
  }
}
</script> 

以上で基本的な変換設定はおわりです。

おすすめのプラグイン

目次の生成

• markdown-it-table-of-contents
• markdown-it-anchor

yarn add markdown-it-table-of-contents markdown-it-anchor

export default {
  markdownit: {
    injected: true,
    // プラグインを使用する場合、ここに書いていきます
    use: [
      "markdown-it-anchor",
      [
        "markdown-it-table-of-contents",
        {
          includeLevel: [1, 2], // 目次で生成する<h>タグ
        },
      ],
    ]
  },
}

markdown-it-table-of-contentsは、目次を自動生成してくれるプラグインで、 markdown-it-anchorは、リンクをクリックすると、その場所まで移動してくれるプラグインです。
変換データの中に[[toc]]を書くと、指定した<h1>タグなどから目次を生成してくれます。

[object Object],タグのの設定

• markdown-it-link-attributes

yarn add markdown-it-link-attributes

export default {
  markdownit: {
    injected: true,
    use: [
      [
        "markdown-it-link-attributes",
        {
          attrs: {
            target: "_blank",
            rel: "noopener noreferrer",
          },
        },
      ],
    ]
  },
}

markdown-it-link-attributesは、オプションに書いたattributesを<a>に追加してくれます。

上記の設定の場合、[リンクテキスト](リンク)から以下のようなHTMLが生成されます。

<a href="/" target="_blank" rel="noopener noreferrer">リンクテキスト</a>

主に重宝しているのは、上記の3つのプラグインです。

この他にも、YoutubeやSoundCloudをいい感じに変換してくれるプラグインやCSSをいい感じに変換してくれるプラグインなどたくさんのプラグインが公開されています。気になる方はmarkdown-it プラグインから調べてみてください。
また、markdown-itを拡張したり、パーサーを１から作るというのも一手かもしれません！