Blogger：ソースコードをかっこよく表示

プログラマーの人たちがやっているように、ソースコードをかっこよく表示させられないものかといろいろ試行錯誤。

背景をグレーにする

とすごいことになっています。
「<」が「&lt;」に、「>」が「&gt;」に変換されています。また、「&nbsp;」は半角スペースです。いくつもついていますね。

さて、「HTML」モードのまま、全体を<div style="background: lightgrey;"></div>ではさんでやります。

<div style="background: lightgrey;">
&lt;div class="container"&gt;<br />
&nbsp; &nbsp; &lt;h1&gt;Bloggerでソースコードを表示する？&lt;/h1&gt;<br />
&nbsp; &nbsp; &nbsp;&lt;p&gt;グレーにしてみた&lt;/p&gt;<br />
&lt;/div&gt;
</div>

「作成」モードに戻ると、こんな具合に表示されます。


おお！　なかなか渋いではないですか。

背景を黒く

でもやっぱり、背景が黒いのがかっこいいかも。
まず、「作成」モードで、

<div class="container">
    <h1>Bloggerでソースコードを表示する？</h1>
     <p>ダークモードだ</p>
</div>

を貼り付けます。
つぎに、「HTML」モードにして、次のように、<div style="background: black; color: white;">と</div>で囲みます。

<div style="background: black; color: white;">
&lt;div class="container"&gt;<br />
&nbsp; &nbsp; &lt;h1&gt;Bloggerでソースコードを表示する？&lt;/h1&gt;<br />
&nbsp; &nbsp; &nbsp;&lt;p&gt;ダークモードだ&lt;/p&gt;<br />
&lt;/div&gt;
</div>

すると次のようになります。


おお！　シンプルでいいではないですか。

やってみて