[Hugo] コード前後のバッククオートを取り除く
Blonde というテーマで Hugo のサイトを作ってみた。
Blonde | Hugo Themes
https://themes.gohugo.io/themes/blonde/
ブログでコードを表示したいことがよくある。Markdown でコードを表示するには３連続バッククート（```）で囲む。
また、コードを文章中でインライン表示させたいときは１つのバッククオート（`）で囲む。
Blonde テーマにおいて、３連続バッククオートはコードっぽく背景が黒くなっていい感じに表示してくれるが、１つのバッククオートで囲むとコードっぽいスタイルが当てられているものの Markdown のバッククオートがそのまま表示されてしまう。
このバッククオートを取り除くにはどうすればいいか。
＊
Blonde テーマの場合、themes/Blonde/assets/css/style.css にデフォルトの CSS が設定されている。インラインクオートは code の項目を探せばいい（なお３連続クオートは pre code の項目だ）。以下のように書かれている。
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
content: "`";
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
content: "`";
}確かに、before と after でバッククオートをそのまま表示するように記述してある。
解決方法としては、Blonde テーマの場合、themes/Blonde/static/css/custom.css というファイルを作成し、そこに以下のように記述すれば上書きされる。
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
content: "";
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
content: "";
} ちなみに、バッククオートは英語で backtick と呼ぶと知った（backstick ではない）。
参考：
How to remove backquote around inline code? · Issue #18 · tailwindlabs/tailwindcss-typography · GitHub
https://github.com/tailwindlabs/tailwindcss-typography/issues/18
Markdown Tutorial => Inline code
https://riptutorial.com/markdown/example/1802/inline-code
Markdown記法 チートシート #Qiita - Qiita
https://qiita.com/Qiita/items/c686397e4a0f4f11683d
マークダウン表示サンプル | Hugoブログテーマ「Salt」
https://hugo-theme-salt.okdyy75.com/article/sample/markdown/#code-コード
Distinguish between single backtick and triple backticks? - support - HUGO
https://discourse.gohugo.io/t/distinguish-between-single-backtick-and-triple-backticks/18131