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

VuePressはmarkdown-itを採用しているので関連のプラグインを追加するだけで色々できます。

今回はhタグなどに独自のclassを追加する方法を書きます。

今回は試しに

• h1タグにtitle
• h2タグにsubtitle
• strongタグにhighlight

というclassを入れてみたいと思います。

まずは

$ npm i @toycode/markdown-it-class --save-dev

src/.vuepress/config.js

module.exports = {
  markdown: {
    extendMarkdown: md => {
      md.use(require('@toycode/markdown-it-class'), {
          // ここでclass指定するよ
          h1: ['title'],
          h2: ['subtitle'],
          strong: ['highlight'],
      })
    },
  },
}

再度$npm run devを叩いてブラウザで確認すると追加されていることが分かるはず。（デベロッパーツールなどで見てみてください）

あとはstyleを書いていくだけ。

VuePressで使えるMarkdown文法一覧

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