sumisima.com

nuxt/content を Vuetify と使うとコードブロックの表示がおかしい

このブログを Nuxt.js で作る際に、nuxt/conten を利用して Markdown で記事を書けるようにしました。サイトデザイン用に Vuetify.js をインストールしていると、CSS が２重に適用されてしまうようで、コードブロックを使うと表示がおかしくなっていたので対策しました。

.v-application code {
  all: unset !important;
}

これでコードブロックの表示は nuxt/cotent で使われているPrismJSの CSS の CSS が適用されます。また、PrismJS はテーマに対応しているので好きなデザインを使用することができます。

まずはインストール。

yarn add prism-themes

nuxt.config.jsに設定を追加することで簡単に適用できます。

Prism themes - Githubを見て好きなデザインの css ファイル名を確認し、追加します。

nuxt.config.js

  content: {
    markdown: {
      prism: {
        theme: 'prism-themes/themes/prism-one-dark.css',
      },
    },
  },