2011/03/30

google-code-prettifyオレオレテーマ(黒背景用) [CSS][HTML]

このエントリーをはてなブックマークに追加 0 comment
[ , , ]
「google-code-prettify」は様々な言語のソースコードを色分け表示するためのJavaScriptライブラリである。
TableKitオレオレテーマ(黒背景用) [CSS][HTML] ＠試行錯誤的知的生活blog
にて、google-code-prettifyを導入してみたので、その時のカスタマイズメモ。
動作は同じっぽいが、可読性・視認性が良いのでsmallではない方をDLした。

↓以下詳細↓

prettify.cssを編集
/* Pretty printing styles. Used with prettify.js. */
 
.str { color: #A70; } /*文字列。引用符で括られた部分など。*/
.kwd { color: #09F; } /*キーワード。*/
.com { color: #5A5; } /*コメント。*/
.typ { color: #96F; } /*クラス名。Perlのモジュール名(の一部)などにも。*/
.lit { color: #09F; } /*リテラル。引用符で括られないで出現する数字や定数など。*/
.pun { color: #996; } /*記号。演算子や式を括る括弧など。*/
.pln { color: #CCC; } /*基本文字色。*/
.tag { color: #D39; } /*HTMLのタグ全体。<や/、>なども。*/
.atn { color: #96F; } /*HTMLの属性名。*/
.atv { color: #A70; } /*HTMLの属性値。*/
.dec { color: #96F; } /*HTMLのDoctype宣言。*/
/*
.str { color: #080; }
.kwd { color: #008; }
.com { color: #800; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
pre.prettyprint { padding: 2px; border: 1px solid #888 }
*/
 
/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background: #eee }
 
@media print {
  .str { color: #060; }
  .kwd { color: #006; font-weight: bold; }
  .com { color: #600; font-style: italic; }
  .typ { color: #404; font-weight: bold; }
  .lit { color: #044; }
  .pun { color: #440; }
  .pln { color: #000; }
  .tag { color: #006; font-weight: bold; }
  .atn { color: #404; }
  .atv { color: #060; }
}
 
/*added*/
pre{
  background-color: #1e1e1e;
  margin: 0px;
  padding-bottom: 0px;
  padding-left:   0px;
  padding-right:  0px;
  padding-top:    0px;
}
 
/*added*/
code {
  background-color: #1e1e1e;
}
 
/*added*/
div.quote {
  border-bottom: rgb(153,153,153) 2px dotted;
  border-left:   rgb(153,153,153) 2px dotted;
  border-right:  rgb(153,153,153) 2px dotted;
  border-top:    rgb(153,153,153) 2px dotted;
}
 
/*
//使うときは、bodyに以下の様な形で記述
<div class="quote" style="height: 400px; overflow: auto;">
<pre class="prettyprint"><code>。
</code></pre>
</div>
*/

テンプレートHTMLの</head>直前に以下を記述
      <link href='http://mydisk.se/ecoco/webpage/js/google-code-prettify/src/prettify.css' rel='stylesheet' type='text/css'/>
      <script src='http://mydisk.se/ecoco/webpage/js/google-code-prettify/src/prettify.js' type='text/javascript'/>

prettify.jsの1462行目
cs.innerHTML = newContent;
を以下に修正
cs.innerHTML = (/*@cc_on!@*/false) ? newContent.replace(/\x0D\x0A|\x0D|\x0A/g,'<br />\n\r') : newContent;


html記述例
<div class="quote" style="height: 400px; overflow: auto;">
<pre class="prettyprint"><code>/* Pretty printing styles. Used with prettify.js. */
 
.str { color: #A70; } /*文字列。引用符で括られた部分など。*/
.kwd { color: #09F; } /*キーワード。*/
.com { color: #5A5; } /*コメント。*/
.typ { color: #96F; } /*クラス名。Perlのモジュール名(の一部)などにも。*/
.lit { color: #09F; } /*リテラル。引用符で括られないで出現する数字や定数など。*/
.pun { color: #996; } /*記号。演算子や式を括る括弧など。*/
.pln { color: #CCC; } /*基本文字色。*/
.tag { color: #D39; } /*HTMLのタグ全体。&lt;や/、&gt;なども。*/
.atn { color: #96F; } /*HTMLの属性名。*/
.atv { color: #A70; } /*HTMLの属性値。*/
.dec { color: #96F; } /*HTMLのDoctype宣言。*/
/*
.str { color: #080; }
.kwd { color: #008; }
.com { color: #800; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
pre.prettyprint { padding: 2px; border: 1px solid #888 }
*/
 
/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background: #eee }
 
@media print {
  .str { color: #060; }
  .kwd { color: #006; font-weight: bold; }
  .com { color: #600; font-style: italic; }
  .typ { color: #404; font-weight: bold; }
  .lit { color: #044; }
  .pun { color: #440; }
  .pln { color: #000; }
  .tag { color: #006; font-weight: bold; }
  .atn { color: #404; }
  .atv { color: #060; }
}
 
/*added*/
pre{
  background-color: #1e1e1e;
  margin: 0px;
  padding-bottom: 0px;
  padding-left:   0px;
  padding-right:  0px;
  padding-top:    0px;
}
 
/*added*/
code {
  background-color: #1e1e1e;
}
 
/*added*/
div.quote {
  border-bottom: rgb(153,153,153) 2px dotted;
  border-left:   rgb(153,153,153) 2px dotted;
  border-right:  rgb(153,153,153) 2px dotted;
  border-top:    rgb(153,153,153) 2px dotted;
}
</code></pre>
</div>

実行例 
/* Pretty printing styles. Used with prettify.js. */
 
.str { color: #A70; } /*文字列。引用符で括られた部分など。*/
.kwd { color: #09F; } /*キーワード。*/
.com { color: #5A5; } /*コメント。*/
.typ { color: #96F; } /*クラス名。Perlのモジュール名(の一部)などにも。*/
.lit { color: #09F; } /*リテラル。引用符で括られないで出現する数字や定数など。*/
.pun { color: #996; } /*記号。演算子や式を括る括弧など。*/
.pln { color: #CCC; } /*基本文字色。*/
.tag { color: #D39; } /*HTMLのタグ全体。<や/、>なども。*/
.atn { color: #96F; } /*HTMLの属性名。*/
.atv { color: #A70; } /*HTMLの属性値。*/
.dec { color: #96F; } /*HTMLのDoctype宣言。*/
/*
.str { color: #080; }
.kwd { color: #008; }
.com { color: #800; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
pre.prettyprint { padding: 2px; border: 1px solid #888 }
*/
 
/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background: #eee }
 
@media print {
  .str { color: #060; }
  .kwd { color: #006; font-weight: bold; }
  .com { color: #600; font-style: italic; }
  .typ { color: #404; font-weight: bold; }
  .lit { color: #044; }
  .pun { color: #440; }
  .pln { color: #000; }
  .tag { color: #006; font-weight: bold; }
  .atn { color: #404; }
  .atv { color: #060; }
}
 
/*added*/
pre{
  background-color: #1e1e1e;
  margin: 0px;
  padding-bottom: 0px;
  padding-left:   0px;
  padding-right:  0px;
  padding-top:    0px;
}
 
/*added*/
code {
  background-color: #1e1e1e;
}
 
/*added*/
div.quote {
  border-bottom: rgb(153,153,153) 2px dotted;
  border-left:   rgb(153,153,153) 2px dotted;
  border-right:  rgb(153,153,153) 2px dotted;
  border-top:    rgb(153,153,153) 2px dotted;
}

ソースによっては、カラフル過ぎて気持ち悪くなるかも。
以上。
tag: , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)