ryuhei373373.3

ProseCode と ProseCodeInline

markdown でインラインコード( hogehoge ← これ )を書いたときのスタイルをあてるのに苦労したという話。基本的に nuxt-modules/mdc の Prose Component 一覧にあるコンポーネントを components/content 以下でオーバーライドすればいいのだが、ひと悶着あった。

https://github.com/nuxt-modules/mdc/tree/main/src/runtime/components/prose を見ると、ProseCode しか存在しないのでインラインは ProseCode、コードブロックは ProsePre あたりで上書きすればいいのかなと思って実装したんだけど、スタイルがあたらず困る。

インスペクタで見てみると呼び出し元が @nuxt/content/dist/runtime/components/Prose/ProseCodeInline.vue との記述があったので、ProseCode じゃなくて ProseCodeInline をオーバーライドすればいいのか?とリネームしたら無事にスタイルがあたった。

とはいえ前述の github のソースに ProseCodeInline なんてなかったやろがい!と憤慨しながら content のドキュメントの Prose Components を読み返すと確かに ProseCodeInline は存在しているんだが、記述にあるソースへのリンク先を確認すると Not Found であり、つまりどういうことなの?となってしまった。

(真の意味で)なにもわからない

とりあえずは mdc とは別に content は content で ProseCodeProseCodeInlineProsePre を持ってるからそれを使えば良いと飲み込むことにしたが、ざっと調べてもどうしてそうなっているのか、何故ドキュメントにはその辺の説明はなくソースのリンク先も Not Found なのかとかはわからなかった。誰か詳しい人がいたら教えてください。