【VuePress】VuePressのMarkdown関連、カスタマイズの基本まとめ

デフォルトで入っているmarkdown-itプラグインのカスタマイズ説明です。

markdown-it関連のカスタマイズはここに書く

src/.vuepress/config.js

module.exports = {
  markdown: {
    // この中に書くよ
  },
}

config.jsのmodule.exportsの中にmarkdownを追加します。

各見出しのアンカーリンク設定です。

src/.vuepress/config.js

module.exports = {
  markdown: {
    anchor: { permalink: false }
  },
}

anchorにはmarkdown-it-anchorのオプションを追加できます。

permalinkで

かどうかを決められます。

tocは「Table Of Contents」（目次）の略です。

module.exports = {
  markdown: {
    toc: { includeLevel: [1, 2] }
  },
}

tocにはmarkdown-it-tocのオプションを追加できます。

includeLevelで[[toc]]で表示させるhの深さを変更可能。

デフォルトは

toc: { includeLevel: [1, 2] },

h1〜h2までが指定されています。

例えばh2だけにしたい場合は

toc: { includeLevel: [2] },

h3まで増やしたい場合は

toc: { includeLevel: [1, 2, 3] },

とすればOK。

module.exports = {
  markdown: {
    lineNumbers: true
  }
}

デフォルトはfalse。

  code

に行数を表示することができます。

書き直したら再度$ npm run devで確認。

プラグインはここから探してみてください。