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

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

VuePress公式の説明(opens new window)

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

src/.vuepress/config.js

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

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

アンカーリンク設定(markdown-it-anchor)

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

src/.vuepress/config.js



 



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

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

permalink

  • #のパーマリンクを見出しの横につける
  • スクロールに応じてhレベルのアンカーリンクを追加する

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

目次設定(markdown-it-toc)

tocは「Table Of Contents」(目次)の略です。



 



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

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

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

VuePressで使えるMarkdown文法一覧

デフォルトは

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

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

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

toc: { includeLevel: [2] },

h3まで増やしたい場合は

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

とすればOK。

codeブロックに行数を追加

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

デフォルトはfalse

  code

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

忘れずに

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

プラグインの追加例

VuePressのタグにclassを追加してカスタマイズする

プラグインはここ(opens new window) から探してみてください。