WordPress.comのソースコード機能のテスト

コードを綺麗に表示させる 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 ライブラリ使ってるよね。
ギャラリー機能やスライドショー機能、そしてこのソースコードを綺麗に表示させる機能も。

まだまだ、探せば色々と出てきそうな気がする。

広告

WordPress.comのソースコード機能のテスト」への4件のフィードバック

  1. ピンバック: テスト:wordpress.comでソースコードを表示 | 猫と甘いものとときどきプログラミング

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中