【Cocoon】インラインコードの表示設定を変更する方法

Cocoonのデフォルトの設定の場合、インラインコードに背景色が付いていませんでした。

エンジニア向けの記事を書く際にインラインコードはよく使うので、背景色は付与しておきたいと思いcssを追記して設定を変更しました。

環境

設定変更前と設定変更後の比較をした結果が、下になります。
(文章の部分です。)

Cocoon Childのstyle.cssに、以下を追記しました。
基本的にこれをコピーして頂ければ問題ないですが、人によってcssの内容が異なると思いますので動作の確認は行うようにお願いします。

/*インラインコードの見え方を変更*/
code {
	font-family: inherit;
	background-color: rgba(0,0,0,.08);
	border-radius: 4px;
	padding: 0.1rem 0.2rem;
}

背景色をグレーに変更する以外のことも対応しているので、一行ずつ解説します。
興味の無い人は飛ばしてもらっても大丈夫です！

font-family: inherit;

親要素のフォントの種類を指定しています。
デフォルトの状態では、フォントの種類が変わっていて少し気持ち悪かったので変更しました。

background-color: rgba(0,0,0,.08);

背景色をグレーに変更しています。今回、一番対応したかった箇所です。

border-radius: 4px;

インラインコードに丸みを持たせています。
角ばっているより丸みがあった方が見やすいですよね。

padding: 0.1rem 0.2rem;

上下、左右の余白を指定しています。
これを指定しないと余白の無いインラインコードになるので、設定しておきました。

Cocoonのデフォルトのインラインコードの設定を変更する方法に関して紹介しました。

特にエンジニアの方はインラインコードは使うことが多いと思いますので、参考になっていれば幸いです。
また、エンジニアではない方もインラインコードを使えば記事を見やすくできるので、良かったら紹介した内容を利用してみてください！