google-code-prettifyでソースコードをシンタックスハイライトする方法を示す。
本ブログではgoogle-code-prettifyを導入済みなので、HTMLソースを適宜参照されたい。
手順は大まかに次の通りである。
1. google-code-prettifyはgoogleのサイトからダウンロードする。
2. アップロードはffftpやwinscpなど、任意の方法でアップロードする。
3. headタグは次のようにする。
ただし、pretty.cssおよびpretty.jsの場所はアップロード先によって変更の必要がある。
4. bodyタグは次のようにする。
5. preタグの適用は次のようにする。
Enjoy!! ともにソースコードを晒しましょう。
本ブログではgoogle-code-prettifyを導入済みなので、HTMLソースを適宜参照されたい。
手順は大まかに次の通りである。
- google-code-prettifyをダウンロード
- google-code-prettifyをウェブサーバにアップロード
- google-code-prettify本体(jsおよびcss)をインクルード
- google-code-prettifyのprettyPrint()をbodyタグのonloadイベントでcall
- シンタックスハイライトしたい部分をpreタグでくくりprettyprintクラスを適用
1. google-code-prettifyはgoogleのサイトからダウンロードする。
2. アップロードはffftpやwinscpなど、任意の方法でアップロードする。
3. headタグは次のようにする。
<head> <title>this is a title.</title> <link href="/js/google_code_prettify/prettify.css" rel="stylesheet" type="text/css"/> <script src="/js/google_code_prettify/prettify.js" type="text/javascript"></script> </head>
ただし、pretty.cssおよびpretty.jsの場所はアップロード先によって変更の必要がある。
4. bodyタグは次のようにする。
<body onload="prettyPrint()">
5. preタグの適用は次のようにする。
<pre class="prettyprint">ソースコード</pre>
Enjoy!! ともにソースコードを晒しましょう。
Leave a comment