コードをhtmlとcssを使って囲う

Question

前提・実現したいこと

例えば
h1 {
color:red
}
というコードを灰色の四角で囲ってそれっぽくしたい

図のような感じです。（図はtableを使ってやった結果です。でもtableは使わずにやりたいです。
（本当はただ四角で囲うだけよりもっとそれっぽくしたいので簡単にできるならその方法も教えて欲しいです。

試したこと

<p>
h1 {<br>
    color:red<br>
</p>

p {
   background-color:gray;
   display: inline-block;
}

こんな感じのコードで大体はできたのですが最後の文字の　}　がほとんど見えなくなってしまいました。
写真ではなぜか　}　が結構見えてますが実際はもっと見えにくいです。
なのでもっと見えやすくする方法かもしくは他の方法でもっとそれっぽくする方法を教えてください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[meg_]

質問タグの「文字コード」は本質問とどう関係しているのでしょうか？

[YukiK.]

ミスです。すみません。

Answer 1

なにしたいのか今ひとつわかりませんが<code>か<pre>のほうが選択として適切なのでは。

Answer 2

<p>
h1 {<br>
  color:red<br>
}
</p> 

p要素の閉じタグの直前に「}」を追加するといいと思います。

  p {
   background-color:gray;
   display: block;
   width: 100px;
   height: 100px;
   padding: 20px;
  }

四角い箱（正方形でしょうか）で囲むなら、display: block でも、いいかもしれません。
この場合、箱の大きさと高さを、それぞれ、width属性とheight属性で指定すると、箱の大きさが決定します。
そして、箱の端からすこし文字を離すと、見栄えがよくなるので、padding属性で、箱の内側の余白を設定するとどうでしょうか。