2013年5月20日月曜日

Blogger: Google-code-prettify

SyntaxHighliter よりもシンプルな見た目の Google-code-pretify を使ってみました。
設置と設置は以下のサイトを参考にさせていただきました。

  ブログ(Blogger)にプログラムのソースコードを埋め込む方法
  ライブドアブログにgoogle-code-prettifyを導入してシンタックスハイライトを実現する
  google-code-prettify

こんな風に表示できます。
<pre class="prettyprint linenums">
ここにコードを書きます。
</pre>

行番号の初期値を指定する場合は
<pre class="prettyprint linenums:18">
こんな風に指定します。
</pre>

行番号を表示しない場合はこんな感じです。
<pre class="prettyprint linenums:0">
ここにコードを書きます。
</pre>

SyntaxHighliter よりもすっきりしていて気に入りました。今後はこちらをメインに使ってみようと思います。

なかなか参考サイトと同じように表示できなくて苦労しましたが、試行錯誤の結果、現在の prettify.css はこんな風になっています。


.pln{color:gray}
@media screen{
 .str{color:#080}
 .kwd{color:#008}
 .com{color:#800}
 .typ{color:#606}
 .lit{color:#066}
 .pun,.opn,.clo{color:#660}
 .tag{color:#008}
 .atn{color:#606}
 .atv{color:#080}
 .dec,.var{color:#606}
 .fun{color:red}
}

@media print,projection{
 .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,.opn,.clo{color:#440}
 .tag{color:#006;font-weight:bold}
 .atn{color:#404}
 .atv{color:#060}
}

.prettyprint {
  padding: 0;
  background-color: #f8f8f8;
  border: 1px solid #e0e0e0;
  
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  width: 95%;
  margin: .8em; auto;
  word-wrap: break-word;
  white-space: pre-wrap;
  overflow: auto
}

ol.linenums {
 margin: 0;
  -webkit-box-shadow: inset 40px 0 0 #fcfcfc, inset 41px 0 0 #ececec;
     -moz-box-shadow: inset 40px 0 0 #fcfcfc, inset 41px 0 0 #ececec;
          box-shadow: inset 40px 0 0 #fcfcfc, inset 41px 0 0 #ececec;
}

/* Specify class=linenums on a pre to get line numbering */

ol.linenums li {
  margin: 0 0 0 5px;
  padding-left: 10px;
  color: #b0b0b0;
  line-height: 18px;
  text-shadow: 0 1px 0 #fff;
}

0 件のコメント: