はてなダイアリーのスーパーpre記法のデザインを変えてみた

どうも、nikuyoshiです。

有名プログラマーの方のブログに触発されて、スタイルシートをちょっといじってみました。*1*2
はてなダイアリーのどんなデザインでも、

• スタイルシートのpre{}で囲まれた箇所をコピペ
• .synSpecial以下を付け足す

以上のことを行えば、最初から指定されているものよりも読みやすくなると思います。

細かいことですが、若干透過させた方が読みやすいので、opacityを0.9に指定しました。

読みやすいページはたいていターミナル、コマンドプロンプト風のものが多く、行数もきちんとついて
いました。はてなダイアリーのスーパーpre記法は行数表示が出来ないようなので諦めましたが、スタイル
シートを少しいじることで、容易にデザインを変更することが出来ました。

pre  {
  border: solid 1px #a0a0a0;
  margin: 1em;
  padding: 0.7em;
  font-size: 11px;
  color: #ffffff;
  background-color: #000000;
  opacity:0.9;
}

.synSpecial    { color: #7fffd4; } /* 特殊文字、記号 */
.synType       { color: #4169e1; } /* タイプ */
.synComment    { color: #78727f; } /* コメント */
.synPreProc    { color: #ffd700; } /* 前処理 */
.synIdentifier { color: #00e5e5; } /* 識別子 */
.synConstant   { color: #ffffff; } /* 定数、文字列 */
.synStatement  { color: #ff8c00; } /* 命令 */

• • -

参照ページ
http://www.colordic.org/
http://www.devolen.com/blog/html_css/rollover_alpha/#
http://pc.casey.jp/archives/153897667
http://serverkurabe.com/blog/syntax-highlighter-setting
http://alexgorbatchev.com/SyntaxHighlighter/
http://d.hatena.ne.jp/tequilasunset/20100131/p1

*1:2012/1/4 更新

*2:2012/12/20 はてなブログでも使えるか保証できません。あしからずご了承ください…