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

ツイート
2020年09月14日
2021年03月02日

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

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

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

bash
yarn add @nuxtjs/markdownit

nuxt.config.jsの設定

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

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

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

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

js
<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
bash
yarn add markdown-it-table-of-contents markdown-it-link-attributes
js
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>タグなどから目次を生成してくれます。

<a>タグのの設定

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

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

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

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

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

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