SyntaxHighlighter Evolved : ソースコードを美しく表示するプラグイン

いつかどこかのサイトで見たきれいなコード表示が忘れられず、「WordPress」「コード」「美しく表示」などのキーワードで検索してみると、ありました! このブログは先日公開されたばかりの WordPress 2.8 を使っていますが、うまく動くかな?と試しに入れてみると、問題なく動作しました。

SyntaxHighlighter Evolved

ソースコードを美しく表示するプラグイン
配布元:SyntaxHighlighter Evolved 2.1.0

参考サイト:

使い方

  1. 配布元より、SyntaxHighlighter Evolved 2.1.0をダウンロードします。(syntaxhighlighter.zip)

  2. 解凍すると「syntaxhighlighter」というフォルダが展開されるので、フォルダごと wp-content/plugins にアップロードします。

  3. 「プラグイン」の画面で、「SyntaxHighlighter Evolved」を有効化します。(※「使用する」をクリック)

  4. これで、 [指定言語] ソースコード [/指定言語] というようにくくると、指定言語に合った表示をしてくれます。

    [php]PHPソースコード[/php]
    [css]CSSソースコード[/css]
    [js]Javascriptソースコード[/js]

    ※[]は全角で書いています。

    扱えるソースコードはこの他にもたくさんあり、上記参考サイトでより詳しく説明されています。
    また、ハイライトにしたり、自動改行させない指定などは、以下のように記述できます。

    例)[php highlight=”3″]…

    <!DOCTYPE html>
    <html <?php language_attributes(); ?> class="no-js">
    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <title><?php wp_title(); ?></title>
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    <?php wp_head(); ?>
    </head>

注意点

配布元のサイトにも記されていますが、このプラグインにはテーマの header.php に <?php wp_head(); ?>、footer.php に <?php wp_footer(); ?> が必要になります。入っていないと動きません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です