ホーム ＞ Movable Type ＞ ティップス ＞ google-code-prettify （ソースコードをハイライトする）

ティップス

google-code-prettify （ソースコードをハイライトする）

google-code-prettify は、コンテンツ内でCSS や HTML などのソースコードを色分けでハイライト（表示）する JavaScript ライブラリです。


google-code-prettify （ソースコードをハイライトする）


① google-code-prettify をダウンロード

推奨↓
・prettify-small-21-May-2009.zip　（13.2 KB）
・prettify-21-May-2009.zip　（58.2 KB）

② ドメイン直下のディレクトリ（階層）に下記ファイルをアップロード
prettify.js
prettify.css

③ <head>～</head>内に下記スクリプトを記述

<head>
<link href="http://example/prettify.css" rel="stylesheet" type="text/css"/>
<script src="http://example/prettify.js" type="text/javascript"></script>
</head>

※Movable Type （ムーバブルタイプ）であれば

<head>
<link href="<$MTBlogURL$>prettify.css" rel="stylesheet" type="text/css"/>
<script src="<$MTBlogURL$>prettify.js" type="text/javascript"></script>
</head>

④ body 要素を下記に変更

<body onload="prettyPrint()">

⑤エントリーで<pre class="prettyprint">～</pre>間にソースコードを記述

<pre class="prettyprint">
ソースコード
</pre>

※応用編
ナンバリング（番号を付加）する場合は下記のようにマークアップします。

01:  <pre class="prettyprint">
02:  <span class="nocode">01:</span> aaaaa
03:  <span class="nocode">02:</span> bbbbb
04:  <span class="nocode">03:</span> ccccc
05:  </pre>

http://code.google.com/p/google-code-prettify/

July 24, 2009｜comments（0）

Add to Google newsing it! イザ！ブックマーク トピックイットに投稿する FC2ブックマーク Yahoo!ブックマークに登録 このエントリーを含むはてなブックマーク BuzzurlにブックマークBuzzurlにブックマーク


関連の記事

スポンサード リンク

トラックバック（0）

Movable Type 5

コメント

コメントフォーム
Name
E-mail
URL

 

コメント： （装飾用のHTMLタグが使えます）

　　

ホーム ＞ Movable Type ＞ ティップス ＞ google-code-prettify （ソースコードをハイライトする）

スポンサードリンク
新着記事