fc2ブログ



本ブログでも使用している、ソースコードをハイライトする方法をご紹介します。

ここでは、google-code-prettifyを使っていますので、そちらをご紹介。
どんな感じかと言うと、サンプルJAVAソースコードの場合

public class HelloWorld {
  public static void main(String[] args) {
    System.out.println("Hello World");
  }
}
こんな感じでハイライト（色付き）されて見やすくなります。

設置方法


①下記URLより”prettify-small-14-Jul-2008.zip”または”prettify-14-Jul-2008.zip”をダウンロードします。
http://code.google.com/p/google-code-prettify/downloads/list
②①でダウンロードしたファイルを解凍します。
　prettify.css、prettify.jsファイルが入っている事を確認してください。
③使っているブログの管理画面を開いてください。
④ファイルアップロード機能を利用し、②で解凍した2ファイルをアップロードします。
　FC2ブログの場合：[ツール]-[ファイルアップロード]→ファイル[参照]→ファイル選択→[アップロード]
⑤HTMLテンプレートの元を修正します。
　FC2ブログの場合：[環境設定]-[テンプレートの設定]→利用しているテンプレートの[HTML編集]
　下記2行を<head>～</head>内に追加してください。

<link href="{ファイルアップ先}/prettify.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="ファイルアップ先}/studynet/prettify.js"></script>
⑥bodyタグにも下記のコードを追加します。
<body  onload="prettyPrint()">
以上で設置は完了です。

使用方法


<pre class="prettyprint">
・・・・ハイライトしたいソースコード
</pre>
これだけでハイライト表示できます。結構簡単ですね。
ちなみに対応しているプログラムの種類は、
"c", "cc", "cpp", "cs", "cyc", "java", "bsh", "csh", "sh",
    "cv", "py", "perl", "pl", "pm", "rb", "js",
    "html", "html", "xhtml", "xml", "xsl".
ちなみに、上記のコード指定をすると一手間かかるからか使う側が難しくなるため、指定はせずプログラム側で自動判別を行ってくれる。これまた便利。

注意点


HTMLやXMLなど”＜””＞”が含まれるソースコードをハイライト表示させたい時・・・・
”＜” → ”&lt;” に ”＞” → ”&gt;”に置換する必要があります。
テキストエディタなど使用して全置換しましょう・・・ここだけめんどい・・・・
スポンサーサイト




 
↑RETURN TO TOP

 
ホーム