上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。




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

ここでは、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;”に置換する必要があります。
テキストエディタなど使用して全置換しましょう・・・ここだけめんどい・・・・
スポンサーサイト


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。