markdown-itで外部へのリンクのみtarget="_blank"する方法

4月頃、本屋で「アウトプット」系の本が多く並ぶのを見て意気込んでブログを作りましたが、
大学院生生活が思っていたより忙しく、久々の更新になってしまいました。

ブログ作成時に書き溜めていたメモがもったいないので、思い出しながら記事にしていきます。

今回は、"markdown-it"でmarkdown→HTMLの変換をする際に、

• リンク先が相対パス(同ドメイン内)の場合は同じタブ
• リンク先が"http"から始まる場合は新しいタブ

で開くように<a>タグにtarget="_blank"を書き加える設定を紹介します。

plugins/markdownit.jsの設定

さっそくですがソースコードです。

plugins/markdownit.js

import MarkdownIt from 'markdown-it'

export default ({ app }, inject) => {

  const md = new MarkdownIt({ //markdownitのオプション
    html: true,
    linkify: true,
    typography: true,
  })

  const defaultRender = md.renderer.rules.link_open || function (tokens, idx, options, env, self) {
    return self.renderToken(tokens, idx, options)
  }
  
  md.renderer.rules.link_open = function (tokens, idx, options, env, self) {
    const aIndex = tokens[idx].attrIndex('target')
    if (tokens[idx]['attrs'][0][1].match('http')) {
      if (aIndex < 0 ) {
        tokens[idx].attrPush(['target', '_blank'])
      } else {
        tokens[idx].attrs[aIndex][1] = '_blank'
      }
    }
    return defaultRender(tokens, idx, options, env, self);
  }

  inject('md', md)
}

nuxt.config.jsのpluginsに、markdownit.jsを追加します。
nuxt.config.jsでmarkdownitのオプションを設定していた場合は、重複してしまうので削除します。

  plugins: [
    '~/plugins/contentful',
    '~/plugins/markdownit', // 追加
    '~/plugins/prism',
  ],
  modules: [
    '@nuxtjs/dotenv',
    '@nuxtjs/markdownit'
  ],
//  オプションはplugins/markdownit.js内に移動
//  markdownit: {
//    injected: true,
//    html: true,
//    linkify: true,
//    typography: true,
//  },

下記参考リンクをもとに、リンク先の判別を追加してNuxtのプラグインとして組み込みました。
参考：Markdown-Itで独自レンダリングする方法 – 踊る犬.netブログ (旧)
参考：nuxt-community/modules

僕はブログなどの記事で別サイトへのリンクが同じタブのまま移動してしまうのがあまり好みではないので、
細かな設定ではありますがカスタマイズしてみました。

ではまた。