[WordPress] SyntaxHighlighter Evolved で、ブログにソースコードを表示する

ブログにソースコードを表示したい

色々なプログラマーさんのブログを見ていると
何やらソースコードが綺麗なフォーマットで表示されていることがあります。

クリップボードへのコピーとか簡単にできたりして、何これスゲェ！とか思っていました。
どうやらWordPressには、ソースコード表示用のプラグインがあるようです。

試しにひとつ入れてみたので紹介します。

SyntaxHighlighter Evolved

プラグイン管理画面から「SyntaxHighlighter Evolved」で検索するか
こちらからダウンロードして、プラグインを追加＆有効化します。

使い方

対応している言語のソースコードと指定のタグでくくると、ソースコードを綺麗に表示してくれます。
例えばPHPのソースコードであれば、以下の形式で記述します。

［php］

/**
* Filter to add more post statuses.
*
* @since 2.2.0
*
* @param string $where SQL statement to filter.
* @return string Filtered SQL statement with added post_status for where clause.
*/
function wa_posts_where_include_drafts_filter($where) {
$where = str_replace("post_status = ‘publish’","post_status = ‘publish’ OR post_status = ‘future’ OR post_status = ‘draft’ OR post_status = ‘inherit’", $where);
return $where;
}
add_filter(‘posts_where’, ‘wa_posts_where_include_drafts_filter’);

［/php］

※[]のタグは、実際は半角で記述します

実際にタグでくくったソースコードが↓こちら。

/**
 * Filter to add more post statuses.
 *
 * @since 2.2.0
 *
 * @param string $where SQL statement to filter.
 * @return string Filtered SQL statement with added post_status for where clause.
 */
function wa_posts_where_include_drafts_filter($where) {
    $where = str_replace("post_status = 'publish'","post_status = 'publish' OR post_status = 'future' OR post_status = 'draft' OR post_status = 'inherit'", $where);
    return $where;
}
add_filter('posts_where', 'wa_posts_where_include_drafts_filter');

非常に簡単ですね。

ソースコード部分にマウスカーソルをあてると、右上にメニューが表示されます。
メニューからはソースコードの単体表示、クリップボードへのコピー、印刷が選べます。

行の開始番号を指定したり、指定行のハイライトなども可能です。

プラグインの管理画面から、テーマの設定などができます。

10日でおぼえる WordPress 入門教室 ［WordPress 3.x対応］

posted with amazlet at 13.01.17

さわだえり
翔泳社
売り上げランキング: 318,770

Amazon.co.jp で詳細を見る