Cocoon のコードブロックを丸角にして文字間調整

WordPress でサイト構築して、やっぱり、最初に気になるのはコードブロックの表示。
いろいろ調べてみたが、ハイライトは Cocoon の標準を使うことにした。

Cocoon 設定から、ハイライト表示を有効化して、ハイライトスタイルを androidstudio に。

この状態で、次のような表示に。
ブラウザのフォントは Noto Sans Mono CJK JP で、18px となっていた。

四隅は直角スタイルもよく見かけるが、Qiita など丸角となっているため、カスタムスクリプトで
border-radius: 8px　を設定して、フォントサイズや文字間隔を少し調整。

外観　→　カスタマイズ　→　追加 CSS

/* code block customize */
.wp-block-code {
    border-radius: 8px;
    font-size: 16px;
    letter-spacing: 0.05rem;
    line-height: 1.6;
}
.wp-block-code code {
    padding: 5px
}

修正後の表示が以下に（フォントは Noto Sans Mono CJK JP）

個人的には、Android Studio のカラーリングで、何か落ち着く感じになった。