Nuxt.js で markdown-it 使用時にプラグインを導入して改行やリンクのターゲットをカスタマイズする

前提

• Nuxt.js で @nuxtjs/markdownit を導入して markdown 対応している
  • https://github.com/markdown-it/markdown-it
  • https://github.com/nuxt-community/modules/tree/master/packages/markdownit

動作確認

• 以下ページで動きを確認できます
  • https://yoshihiro-hirose.github.io/nuxt-vuetify-sample/samples/md

やりたいこと

テーブル内で改行したい!

• <br> タグで改行するようにしたい
• markdown-it の標準機能にはないのでプラグイン導入で対応する
  • markdown-it-br を使う
  • https://www.npmjs.com/package/markdown-it-br
• yarn add markdown-it-br でモジュール追加
• markdown-it のドキュメントにもあるが use で使用するプラグインを設定する

nuxt.config.ts

  markdownit: {
    省略: ...
    use: [
      'markdown-it-br'
    ]
  },

リンクを別タブで開くようにしたい

• linkify: true でリンクを自動判別してくれる
• デフォルトは同じページに開くようになっている
• target=_blank のようにして別タブで開かせたい
• markdown-it-external-links を導入して、設定を加える。
  • IE11 対応のため markdown-it-link-attributes を使うようにしました
  • https://www.npmjs.com/package/markdown-it-link-attributes
• yarn add markdown-it-link-attributes でモジュール追加
• ドキュメントにあるようにリンクの target を設定する。nuxt でのプラグインへのオプション設定方法は以下

nuxt.config.ts

  markdownit: {
    省略: ...
    linkify: true,
    use: [
      'markdown-it-br',
      [
        'markdown-it-link-attributes',
        {
          attrs: {
            target: '_blank',
            rel: 'noopener'
          }
        }
      ]
    ]
  },

サンプル