Nuxt.jsのマークダウンでショートコードを使う方法
Nuxt.jsのページ作成はVueのコンポーネントを組み合わせて作っていきます。
ただページによってはコンテンツ部分はマークダウンにしたいこともありますよね。
そんなにニーズに合わせてマークダウンを使う仕組みはありますが、ショートコードが使えない・・。
マークダウンでコンテンツを作っていると、ショートコードが使いたくなってしまうので、使える方法を探してみました。
マークダウンでショートコードとは
ショートコードはWordPress使ったことある人なら馴染みがあると思いますが、決まったフォーマットの文字列を書くと決まったHTMLを出力するものです。
例えばWordPressだと下記のようなイメージ。
// ショートコード
[hello]
// 出力
<div class="hello">Hello World</div>
[hello]という文字列で出力部分のHTMLに変換されるようにしておくと、表示上はHTMLになる。
ショートコードはWordPress独自の機能というわけではなく、このブログを作っているNode.js製の静的ファイルジェネレーターでもショートコードと同じ仕組みが容易されている。
Nuxt.jsでマークダウンを使う
Nuxt.jsでマークダウンを使うには設定が必要になる。
nuxt.config.jsに下記のようにマークダウンを使うためにmarkdownitが使えるように設定します。
{
modules: [
"@nuxtjs/markdownit"
]
}
これでvueファイル内からcomputed(getter)でコンテンツを返すことができるようになります。
下記はvueをクラス形式で書いた場合の例です。
<template>
<div>
<div v-html="html"></div>
</div>
</template>
<script>
const markdown = require('/path/tp/markdown-file');
export default class extends Vue {
get html() {
return markdown;
}
}
</script>
読み込んでマークダウンをv-htmlで出力できます。
マークダウンでショートコードを使う
結論を書くとNuxt.jsのマークダウンでショートコードは半分使えて、半分使えないイメージです。
markdownit: {
use: [
[require('markdown-it-shortcode-tag'), shortcodes]
]
}
Nuxt.jsでマークダウンを使うためにmarkdownitが使われていますが、markdownitにはプラグインが多く存在していて、ショートコードを生成するプラグインもありました。
nuxt.config.jsにmarkdownitのオブジェクトを追加して、useというキーで上記のようにプラグインを読み込みます。
Nuxt.js用にショートコードを定義する
先に紹介したコードのshortcodes部分がショートコードを指定した変数になります。
[require('markdown-it-shortcode-tag'), shortcodes]
例えば最初に紹介したようなhelloというショートコードを作るにはshortcodesの部分は下記のようになります。
const shortcodes = {
hello: {
render: function(attr) {
return `<div>${attr.msg}</div>`;
}
}
}
// マークダウンでの使い方
<hello msg="Hello World">
キーにショートコード名、renderという関数に文字列を返すことでマークダウン内でショートコードが使えるようになります。
ショートコードで挟むyield的な使い方ができない
markdown-it-shortcode-tagを使うことで、ショートコードが使えるようになりますが、残念ながらショートコードでコンテンツを囲むことができません。
例えば下記のようにタグ内のHTMLをショートコードで使えると理想なんですよね。
<hello>
Hello World
</hello>
だけどmarkdown-it-shortcode-tagではタグの属性値で指定値しか取得できないため、上記のような使い方ができないのがつらい。
まったくショートコードが使えないよりは良いけれどって感じが否めない・・。
ショートコードはVuePressに期待
Nuxt.jsだと理想な形でショートコードが使えないから、マークダウンでコンテンツを生成をすることを目的としている、Vue.js製の静的ファイルジェネレーターのVuePressに期待かな。
VuePressについてこの記事は詳しく触れませんが、ロードマップにブログ機能のサポートが予定されているから、いづれショートコードが使えるようになりそう。
ただNuxt.jsでマークダウンを使う場合はショートコードが完全に使えないことを頭に置いておかなければならない・・。
ちゃんとショートコードが使える方法は模索してみるけど、需要がないんだろうか。
Discussion