[ 目次 ]

• はじめに
• markdown-it-containerのインストール
• nuxt.config.jsの修正
• 利用方法
• サンプル

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

今回は、本ブログの投稿内にmessage boxを用意します。既に@nuxtjs/markdownitが導入されていますので、markdown-itのプラグインとなるmarkdown-it-containerを利用していきます。

markdown-it/markdown-it-container

@nuxtjs/markdownit 導入の記事は、vue-markdown をやめて nuxtjs/markdownit を利用する をご確認ください。

本ブログでは、CSSフレームワークとしてbulmaを利用しています。

https://bulma.io/documentation/components/message/

こちらのページのmessageのスタイルでboxを作っていきます。

markdown-it-containerのインストール

■ npmを利用する場合

$ npm install markdown-it-container --save

■ yarnを利用する場合

$ yarn add markdown-it-container

nuxt.config.jsの修正

markdownitの設定部分を修正していきます。

■ 修正前

markdownit: {
  injected: true, // $mdを利用してmarkdownをhtmlにレンダリングする
  breaks: true, // 改行コードを<br>に変換する
  html: true, // HTML タグを有効にする
  linkify: true, // URLに似たテキストをリンクに自動変換する
  typography: true,  // 言語に依存しないきれいな 置換 + 引用符 を有効にします。
  use: [
    'markdown-it-toc' // 目次を作るためのライブラリ。別途インストールが必要
  ]
}

■ 修正後

markdownit: {
  preset: 'default',
  injected: true,
  breaks: true,
  use: [
    // ### markdown-it-containerの設定 ###
    ['markdown-it-container', 'warning', {

      validate: function(params) {
        return params.trim().match(/^message\s+(.*)$/);
      },
    
      render: function (tokens, idx) {
        var m = tokens[idx].info.trim().match(/^message\s+(.*)$/);
    
        if (tokens[idx].nesting === 1) {
          return '<div class="message ' + md.utils.escapeHtml(m[1]) + '"><div class="message-body">';
    
        } else {
          return '</div></div>\n';
        }
      }
    }],
    // ### ここまで ###
    'markdown-it-toc'
  ]
},

利用方法

markdown内に以下のように記述することでmessage boxが作成できます。

::: message is-primary
Primary
:::

::: message is-info
Info
:::

::: message is-success
Success
:::

::: message is-warning
Warning
:::

::: message is-danger
Danger
:::

レンダリングされるHTMLは以下です。

<div class="message is-primary">
  <div class="message-body">
    <p>Primary</p>
  </div>
</div>

<div class="message is-info">
  <div class="message-body">
    <p>Info</p>
  </div>
</div>

<div class="message is-success">
  <div class="message-body">
    <p>Success</p>
  </div>
</div>

<div class="message is-warning">
  <div class="message-body">
    <p>Warning</p>
  </div>
</div>

<div class="message is-danger">
  <div class="message-body">
    <p>Danger</p>
  </div>
</div>

サンプル