はてなブログでコード表示をコマンドライン風にする

f:id:m-oota-711:20180824073657p:plain

ブログを書いていて、コード表示はスーパーpre記法を使用していた。

このような表示になる

この場合、ブログのテーマで設定された背景色・文字色になってしまうため
コマンドラインのように背景が黒で文字が白にできない。

そこで、preタグを使用します。

<pre><code>ここにコードを書く</pre></code>

※codeタグ：プログラムのソースコードであることを示す。タグで囲まれた部分は等幅フォントで表示される。

preタグをこのまま使うだけではスーパpre表記と同じなので
preタグのスタイルを記述します。

<pre style="font-family: 'Ricty-Diminished'; color: #F5FFFA; background-color: #000000;">ここにコードを書く</pre></code>

このような表示になる

フォントはRictyDiminished 、
文字のカラーはMintCream 、
背景のカラーはBlack 、で設定しました。

カラーは16進数のRGBになります。ここで確認できます。
その他の指定方法はこちらで確認できます。

毎回これを入力するのは面倒です。

デザイン→カスタマイズ→デザインCSS
に登録することでブログ内のすべてのpreタグのスタイルを設定にできる。

f:id:m-oota-711:20180824134333p:plain

以下の設定を追記する。

pre {
    font-family: 'Ricty-Diminished';
    color: #F5FFFA;
    background-color: #000000
}

以上

Kinaconの技術ブログ