ソースコード表示
ソースコード表示が若干見にくいので、カスタマイズしてみた。
修正したい点は
(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 がBootstrapのCSSで、上段の pre が追加して表示されたコード。
下段のBootstrapCSSが無効になっているがよく解る。