コード表示の最適化　⇒　STINGER8設定その8

コードが見にくい

preタグでコードを表示した時に困るのが、いまいち見づらいことだ。

コードのハイライト表示を導入したことで、多少は見やすくはなっていた。

google code-prettifyでコード表示をハイライト（動作しないので焦るが解決済み）　⇒　STINGER8設定その2

しかし本文とコードとの境界が分かりにくく、間隔も狭かったために見づらいことこの上ない。

しかも、1行のコードだとスクロールバーが邪魔をしてコードを見ることも選択することもできない場合がある。

これはなんとかしないと。

cssで修飾

そこで、cssで表示を調整することにした。

前回の引用部分と考え方は同じだ。

引用を効率化するため拡張機能Format Linkをgoogle Chromeに入れる　⇒　STINGER8設定その7

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;
}

これで見やすくなった。