コードが見にくい
preタグでコードを表示した時に困るのが、いまいち見づらいことだ。
コードのハイライト表示を導入したことで、多少は見やすくはなっていた。
google code-prettifyでコード表示をハイライト（動作しないので焦るが解決済み） ⇒ STINGER8設定その2
しかし本文とコードとの境界が分かりにくく、間隔も狭かったために見づらいことこの上ない。
しかも、1行のコードだとスクロールバーが邪魔をしてコードを見ることも選択することもできない場合がある。
これはなんとかしないと。
cssで修飾
そこで、cssで表示を調整することにした。
前回の引用部分と考え方は同じだ。
pre{
padding: 5em 1em 2em;
margin: 2em 0 4em;
border: 1px solid #aaa;
border-radius: 10px;
box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
background: #fff url("https://amiens.jp/wp-content/uploads/2019/05/code.gif") 10px 10px no-repeat;
}
これで見やすくなった。
