pre 記法のスタイル
公開デザイン highhat の pre 記法のスタイルが微妙だったので調整してみた。
pre 記法のスタイルは CSS という言語で記述されるらしく、「管理」→「デザイン」→「デザイン編集」→「詳細」タブ →「スタイルシート」の中に CSS のコードを記述すれば適応される。
スクロールバー
highhat での pre 記法のスタイルは以下のように定義されている。
pre { margin: 1em 0; padding: 1em; background-color: #282828; color: #ffffff; }
この括弧の中（宣言ブロックと呼ぶらしい）に
overflow: auto;
という要素（宣言）を加えると、必要に応じて横スクロールバーが現れる。加えて、
max-height: 30em;
という宣言を記述すると、縦に 30 em 以上のときに縦スクロールバーが現れる。
色
はてなダイアリーでの初期値は以下のようになっているので、色の部分を適当に調整する。Firefox を使っているなら、ColorZilla というアドオンが便利。
/* SUPERPRE SYNTAX HIGHLIGHT */ .synSpecial { color: #c000c0; } /* 特殊文字、記号 */ .synType { color: #008000; } /* タイプ */ .synComment { color: #0000c0; } /* コメント */ .synPreProc { color: #c000c0; } /* 前処理 */ .synIdentifier { color: #008080; } /* 識別子 */ .synConstant { color: #c00000; } /* 定数、文字列 */ .synStatement { color: #804000; } /* 命令 */
出来上がり
すぐデザイン変えちゃいそうだけど、とりあえずこれでやっていこう。
pre { margin: 1em 0; padding: 1em; background-color: #282828; color: #ffffff; overflow: auto; max-height: 40em; } .synSpecial { color: #c000c0; } .synType { color: #FC486F; } .synComment { color: #008000; } .synPreProc { color: #159FDC; } .synIdentifier { color: #45FFD4; } .synConstant { color: #FF9653; } .synStatement { color: #4070FF; }
