[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


この記事が気に入ったらサポートをしてみませんか？