コードを綺麗に表示させる WordPress.com の機能を見つけたので自分用にメモ。
これには、JavaScript ライブラリ SyntaxHighlighter を使ってるみたい。
SyntaxHighlighter とは、ソースコード等を色付きで綺麗に表示してくれるJavaScriptライブラリ。
技術系のサイトで結構使われているので、結構見た事ある人も多いと思う。
ソースコード機能のテスト(サンプル)
以下はHTMLコード
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>タイトル</title>
<link rel="stylesheet" href="hoge.css" type="text/css" />
</head>
<body>
<div id="header">
<!-- タイトルなどのヘッダー -->
</div>
<div id="navigation">
<!-- ナビゲーション（サイドバー） -->
</div>
<div id="content">
<!-- コンテンツ関連の記述（省略） -->
</div>
<div id="footer">
<!-- フッター -->
</div>
</body>
</html>
以下はCSSコード
#header {
text-align: center;
border: 1px solid #000000;
}
以下は JavaScriptコードを表示するテスト
var Obj4 = function(a) {
var m = "test";
var n = a;
return {
init: function() {
alert(m + n);
}
};
};
var obj4 = Obj4(4);
obj4.init();
使い方と手順
投稿ページ、もしくは編集するページを開く。
その中に[sourcecode] [/sourcecode]を埋め込み、その中にコード記述する。
サンプルで表示したCSSコードの例は以下の様な感じ
[sourcecode language="css"]
#header {
text-align: center;
border: 1px solid #000000;
}
[/sourcecode]
languageパラメータ部分は、記述するコードの種類
HTMLコードの場合は、language=”html”
CSSコードの場合は、language=”css”
JavaScriptコードの場合は、language=”javascript”
XMLコードの場合は、language=”xml”
PHPコードの場合は、language=”php”
bashコードの場合は、language=”bash”
などなど…
languageパラメータをセットしない場合は
デフォルトの language=”text” (色が付かない) がセットされる。
個人的な感想を言えば、ちょっと重い…。
処理が完了するまで時間が掛かってるのかな？
WordPress.comで、技術系のサイトをやっている人 (特にコードをよく載せる人) は
使ってみると良いかもしれない。
参考にしたのはこちら
Posting Source Code — Support — WordPress.com (英語)
余談
そういえば、WordPress.comって結構 JavaScript ライブラリ使ってるよね。
ギャラリー機能やスライドショー機能、そしてこのソースコードを綺麗に表示させる機能も。
まだまだ、探せば色々と出てきそうな気がする。
銀メモ -SilveryMemo- 