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でマークダウンを使う場合はショートコードが完全に使えないことを頭に置いておかなければならない・・。

ちゃんとショートコードが使える方法は模索してみるけど、需要がないんだろうか。

WEB開発の依頼について

フリーのフロントエンドエンジニアとして企業様のWEB開発をさせていただいています。

Vue.jsやReact.jsを使ったアプリケーションの作成などのご要望がありましたら、お気軽にお問い合わせください。

実績や単価については「WEB開発について」をご覧ください。

運営について

MK Devはフリーランスのエンジニア村上浩司が運営するメディアです。フロントエンドを中心としたWEB開発、PCやガジェットに関連したことを発信しています。

最新の情報を受取る

(c) MK Dev. All Rights Reserved.