nuxt/markdownitと周辺プラグインの設定
MonohibiではMarkdownで記事を書き、HTMLに変換して表示しています。
そこでMarkdownをHTMLに変換するのために利用しているnuxt/markdownitと、その周辺のプラグインを紹介します。
Contents
nuxt/markdownit
MarkdownをHTMLに変換します。
インストール
% yarn add --dev @nuxtjs/makdown-it
設定
// nuxt.config.js
{
modules: [
'@nuxtjs/markdownit'
],
markdownit: {
injected: true, // $mdを利用してmarkdownをhtmlにレンダリングする
breaks: true, // 改行コードを<br>に変換する
html: true, // HTML タグを有効にする
linkify: true, // URLに似たテキストをリンクに自動変換する
typography: true, // 言語に依存しないきれいな 置換 + 引用符 を有効にする
}
}
modulesに@nuxtjs/markdownitを追加して、markdownitに設定を記述していきます。
表示方法
<!-- posts/_slug.vue -->
<template>
<div class="post-content" v-html="$md.render(currentPost.fields.body)" />
</template>
表示させたいファイルにv-html="$md.render()を使って表示させます。
markdown-it-table-of-contents
目次を生成します。
インストール
% yarn add --dev markdown-it-table-of-contents
設定
// nuxt.config.js
{
modules: [
'@nuxtjs/markdownit'
],
markdownit: {
injected: true,
breaks: true,
html: true,
linkify: true,
typography: true,
use: [
['markdown-it-table-of-contents', {
includeLevel: [2, 3], // h2, h3を目次として表示する
containerHeaderHtml: '<div class="toc-container-header">Contents</div>' // 目次の見出しの内容を設定する
}],
]
}
}
markdownitにuseを追加してmarkdown-it-table-of-contentsで設定を記述していきます。
表示方法
contentfulで[[toc]]を記述すると自動的に見出しが目次になります。
markdown-it-anchor
目次から指定の見出しに移動します。
インストール
% yarn add --dev markdown-it-anchor
設定
// nuxt.config.js
{
modules: [
'@nuxtjs/markdownit'
],
markdownit: {
injected: true,
breaks: true,
html: true,
linkify: true,
typography: true,
use: [
['markdown-it-table-of-contents', {
includeLevel: [2, 3],
containerHeaderHtml: '<div class="toc-container-header">Contents</div>'
}],
'markdown-it-anchor' // 見出し内部リンク
]
}
}
useにmarkdown-it-anchorを追加します。
markdown-it-link-attributes
外部リンクを別タブで開きます。
インストール
yarn add --dev markdown-it-link-attributes
設定
// nuxt.config.js
{
modules: [
'@nuxtjs/markdownit'
],
markdownit: {
injected: true,
breaks: true,
html: true,
linkify: true,
typography: true,
use: [
['markdown-it-table-of-contents', {
includeLevel: [2, 3],
containerHeaderHtml: '<div class="toc-container-header">Contents</div>'
}],
'markdown-it-anchor',
['markdown-it-link-attributes', { // 外部リンク別タブ
attrs: {
target: '_blank',
rel: 'noopener'
}
}],
]
}
}
useにmarkdown-it-link-attributesを追加して設定を記述していきます。
markdown-it-video
動画をショートコードで埋め込めます。
インストール
% yarn add --dev markdown-it-video
設定
// nuxt.config.js
{
modules: [
'@nuxtjs/markdownit'
],
markdownit: {
injected: true,
breaks: true,
html: true,
linkify: true,
typography: true,
use: [
['markdown-it-table-of-contents', {
includeLevel: [2, 3],
containerHeaderHtml: '<div class="toc-container-header">Contents</div>'
}],
'markdown-it-anchor',
['markdown-it-link-attributes', {
attrs: {
target: '_blank',
rel: 'noopener'
}
}],
'markdown-it-video' // 動画をショートコードで埋め込み
]
}
}
useにmarkdown-it-videoを追加します。
表示方法
contentfulで@[youtube](dQw4w9WgXcQ)のように動画のプラットフォームとURLのIDを記述します。
さいごに
以上が僕自身が記事を書く時に利用しているプラグインになります。
デザインや設定はデフォルトから変えているので、もし必要であればそれぞれの環境に合わせて調整してください。
