How to2021.04.02

Nuxt.jsのマークダウンでショートコードを使う方法

Nuxt.jsのページ作成はVueのコンポーネントを組み合わせて作っていきます。

ただページによってはコンテンツ部分はマークダウンにしたいこともありますよね。

そんなにニーズに合わせてマークダウンを使う仕組みはありますが、ショートコードが使えない・・。

マークダウンでコンテンツを作っていると、ショートコードが使いたくなってしまうので、使える方法を探してみました。

目次

マークダウンでショートコードとは
Nuxt.jsでマークダウンを使う
マークダウンでショートコードを使う
1. Nuxt.js用にショートコードを定義する
2. ショートコードで挟むyield的な使い方ができない
ショートコードはVuePressに期待

マークダウンでショートコードとは

ショートコードはWordPress使ったことある人なら馴染みがあると思いますが、決まったフォーマットの文字列を書くと決まったHTMLを出力するものです。

例えばWordPressだと下記のようなイメージ。

1
2
3
4
5
// ショートコード
[hello]

// 出力
<div class="hello">Hello World</div>

[hello]という文字列で出力部分のHTMLに変換されるようにしておくと、表示上はHTMLになる。

ショートコードはWordPress独自の機能というわけではなく、このブログを作っているNode.js製の静的ファイルジェネレーターでもショートコードと同じ仕組みが容易されている。

Nuxt.jsでマークダウンを使う

Nuxt.jsでマークダウンを使うには設定が必要になる。

nuxt.config.jsに下記のようにマークダウンを使うためにmarkdownitが使えるように設定します。

1
2
3
4
5
{
  modules: [
    "@nuxtjs/markdownit"
  ]
}

これでvueファイル内からcomputed（getter）でコンテンツを返すことができるようになります。

下記はvueをクラス形式で書いた場合の例です。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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のマークダウンでショートコードは半分使えて、半分使えないイメージです。

1
2
3
4
5
markdownit: {
  use: [
    [require('markdown-it-shortcode-tag'), shortcodes]
  ]
}

Nuxt.jsでマークダウンを使うためにmarkdownitが使われていますが、markdownitにはプラグインが多く存在していて、ショートコードを生成するプラグインもありました。

nuxt.config.jsにmarkdownitのオブジェクトを追加して、useというキーで上記のようにプラグインを読み込みます。

Nuxt.js用にショートコードを定義する

先に紹介したコードのshortcodes部分がショートコードを指定した変数になります。

1
[require('markdown-it-shortcode-tag'), shortcodes]

例えば最初に紹介したようなhelloというショートコードを作るにはshortcodesの部分は下記のようになります。

1
2
3
4
5
6
7
8
9
10
const shortcodes = {
  hello: {
    render: function(attr) {
      return `<div>${attr.msg}</div>`;
    }
  }
}

// マークダウンでの使い方
<hello msg="Hello World">

キーにショートコード名、renderという関数に文字列を返すことでマークダウン内でショートコードが使えるようになります。

ショートコードで挟むyield的な使い方ができない

markdown-it-shortcode-tagを使うことで、ショートコードが使えるようになりますが、残念ながらショートコードでコンテンツを囲むことができません。

例えば下記のようにタグ内のHTMLをショートコードで使えると理想なんですよね。

1
2
3
<hello>
  Hello World
</hello>

だけどmarkdown-it-shortcode-tagではタグの属性値で指定値しか取得できないため、上記のような使い方ができないのがつらい。

まったくショートコードが使えないよりは良いけれどって感じが否めない・・。

ショートコードはVuePressに期待

Nuxt.jsだと理想な形でショートコードが使えないから、マークダウンでコンテンツを生成をすることを目的としている、Vue.js製の静的ファイルジェネレーターのVuePressに期待かな。

VuePressについてこの記事は詳しく触れませんが、ロードマップにブログ機能のサポートが予定されているから、いづれショートコードが使えるようになりそう。

ただNuxt.jsでマークダウンを使う場合はショートコードが完全に使えないことを頭に置いておかなければならない・・。

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