prettify

google-code-prettifyからダウンロードした google-code-prettify を解凍します。
表示させようと思う自分のサイトの適確な場所へ解凍したものをおきます。

以下は prettify の言語の指定例です。表示サンプルとして使ってみました。

<pre class="prettyprint" id="bash">
<pre class="prettyprint" id="C">
<pre class="prettyprint" id="Cpp">
<pre class="prettyprint" id="java">
<pre class="prettyprint" id="javascript">
<pre class="prettyprint" id="issue12">
<pre class="prettyprint" id="perl">
<pre class="prettyprint" id="python">
<pre class="prettyprint" id="xml">
<pre class="prettyprint" id="html">
<pre class="prettyprint" id="htmlXmp">
<pre class="prettyprint" id="xhtml">
<pre class="prettyprint" id="PHP">
<pre class="prettyprint" id="xsl">
<pre class="prettyprint" id="issue4">
<pre class="prettyprint" id="issue8">
<pre class="prettyprint" id="issue14a">
<pre class="prettyprint" id="issue14b">
<pre class="prettyprint" id="issue20">
<pre class="prettyprint" id="issue21">

実装方法

上記のように <head> と </head> の間に prettify.js と prettify.css の指定をします。
ファイルの場所は適確、自分の環境に合わせてなおしてください。

<body> 要素に「 onload="prettyPrint()" 」の属性を追加します。

<pre class="prettyprint" id="javascript">

ここへソース

</pre>

言語の指定

言語の指定は「 id="###" 」のようにします。以下例です。

おまけ

背景色などの変更については「 prettify.css 」に手を加えます。
真ん中あたりの項目です。

pre.prettyprint {
 padding: 2px;
 border: 1px solid #888;
}

となっているところへ「 background-color:#F7F8FA; 」などと足します。もちろん「 F7F8FA 」の所へはお好きな色をどうぞ。
詳細についてはこちらへどうぞ。

上へ戻る | HOMEへもどる