class.exe

blog.netaka.net

nuxt/contentとVuetifyでコードブロックのスタイルがおかしくなる

10/16/2020

この記事を書いてから1年が経っています。内容が古いかもしれません。

本ブログをnuxt/contentとVuetifyで作り直してみました。しかしながら、nuxt/contentで利用しているPrismJSとVuetifyが両方とも適用されたためかコードブロックのスタイルがおかしくなってしまいました。

二重にシンタックスハイライトされたコードブロック
二重にシンタックスハイライトされたコードブロック

使用しているバージョンはこちら

nameversion
Nuxt.js2.14.7
@nuxt/content1.6.0
Vuetify1.11.2

とくにテキストの背景色が不要です。Chromeのデベロッパーツールで確認すると.v-application codeセレクタで背景色が適用されていました。

.v-application code
.v-application code

Stack Overflow1でも同様の質問があったので、解決策通りにunsetします。

.v-application code {
  all: unset
}

結果、PrismJSだけのスタイルになったようです。

修正後
修正後

Footnotes

  1. vue.js - How to disable Vuetify's style? - Stack Overflow