【VuePress】VuePressのMarkdown関連、カスタマイズの基本まとめ
デフォルトで入っているmarkdown-itプラグインのカスタマイズ説明です。
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のオプションを追加できます。
permalink
で
- #のパーマリンクを見出しの横につける
- スクロールに応じてhレベルのアンカーリンクを追加する
かどうかを決められます。
目次設定(markdown-it-toc)
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。
codeブロックに行数を追加
module.exports = {
markdown: {
lineNumbers: true
}
}
デフォルトはfalse
。
code
に行数を表示することができます。
忘れずに
書き直したら再度$ npm run dev
で確認。
プラグインの追加例
VuePressのタグにclassを追加してカスタマイズする
プラグインはここから探してみてください。