Browse: Home » google-code-prettifyの導入。

google-code-prettifyの導入。

1, まずはココからJSとCSSをダウンロード。
2, DLしたファイルを解凍して出てきたフォルダの中のdistrib/google-code-prettify/の中にあるprettify.jsとprettify.cssをサーバーにアップロード。
3, 以下のようにして読み込む。

<head>
<link rel="stylesheet" type="text/css" href="prettify.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="prettify.js"></script>
</head>
<body onload="prettyPrint()">
<!--bodyタグのonloadで上記関数を実行すること。-->
</body>

これで準備完了
あとは、コードとしてハイライトしたい部分を以下のようにpreタグで囲む。

<pre class="prettyprint linenums"></pre>
<!--linenumsクラスをはずすと左に行番号がでなくなる。-->

またtwitter bootstrapと併せて利用する場合はpretty.cssが競合を起こして表示が微妙におかしくなるので、その場合はpretty.cssの中身を以下にごっそり置き換えると治る。

.com { color: #93a1a1; }
.lit { color: #195f91; }
.pun, .opn, .clo { color: #93a1a1; }
.fun { color: #dc322f; }
.str, .atv { color: #D14; }
.kwd, .linenums .tag { color: #1e347b; }
.typ, .atn, .dec, .var { color: teal; }
.pln { color: #48484c; }
 
.prettyprint {
  padding: 8px;
  background-color: #f7f7f9;
  border: 1px solid #e1e1e8;
}
.prettyprint.linenums {
  -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
     -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
          box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
}
 
/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
  margin: 0 0 0 33px; /* IE indents via margin-left */
} 
ol.linenums li {
  padding-left: 12px;
  color: #bebec5;
  line-height: 18px;
  text-shadow: 0 1px 0 #fff;
}

以上完了。

2013/07/16 _onichannn ,