ソースコード表示

  ソースコード表示が若干見にくいので、カスタマイズしてみた。

修正したい点は
(1)枠の罫線を濃くした
(2)背景色
(3)コード文字色を濃く、フォントサイズを大きく

1.Bootstrapファイルから「pre」で検索し、修正したい点のCSSを探すと以下が見つかる。

1,558行目から
pre {
  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  font-size: 13px;            /* フォントサイズ  */
  line-height: 1.42857143;
  color: #333333;             /* 文字色  */
  word-break: break-all;
  word-wrap: break-word;
  background-color: #f5f5f5;   /* 背景色  */
  border: 1px solid #ccc;      /* 枠の罫線  */    
  border-radius: 4px;
} 

2.上記の4点を以下のように追加記述

 ファイル */app/webroot/theme/Default/css/style.css
pre {
font-size: 14px; /* フォントサイズ */ color: #000000; /* 文字色 */ background-color: #ccffcc; /* 背景色 */ border: 1px solid #000000; /* 枠の罫線 */
}  

 pre要素をカストマイズ

上記の追加分をブラウザで確認してみると

下段の pre がBootstrapのCSSで、上段の pre が追加して表示されたコード。
下段のBootstrapCSSが無効になっているがよく解る。