HOME > WordPress > google-code-prettifyをショートコードで

google-code-prettifyをショートコードで

プラグイン「Syntax Highlighter」等をインストールする方法もあるが、かなり重たいコードを組んでいるように見え、レスポンシブ時の狭い表示幅で対応しにくくなりそうな気もする。

そこで、js、google-code-prettify を header.php で読み込み。

<script type="text/javascript" src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

この後、function.php に下記のコードを追加。
※参考サイトのコードをほぼそのまま流用した。

 

参考サイト http://blog.webspace.jp/235
/**
 * google-code-prettifyを利用するショートコード
 */
function shortcode_code( $atts, $content = null ) {
    // 引数の初期値
    $defaults = array(
        'linenums' => '0',
        'lang' => '',
        'convert' => false,
    );
    $atts = shortcode_atts( $defaults, $atts );
 
    $class = array();
    $class[] = 'prettyprint'; // 必須クラス
 
    // linenumsクラスの設定
    // linenums="0"の場合にlinenumsを設定しない
    if ($atts['linenums']) {
        if ($atts['linenums'] > 1) {
            $class[] = 'linenums:' . $atts['linenums'];
        }
        $class[] = 'linenums'; // CSS適用のために付与
    }
 
    // 言語の指定
    if ($atts['lang']) {
        $class[] = 'lang-' . $atts['lang'];
    }
 
    // 文字参照への変換の要否
    if ($atts['convert']) {
        // convert="true"の場合
        $convert = true;
    } else if ($content != strip_tags($content)) {
        // strip_tagsしてみて本文が変化した(タグが存在する)場合
        $convert = true;
    } else {
        $convert = false;
    }
 
    if ($convert) {
        $content = htmlspecialchars( $content, ENT_QUOTES );
    }
 
    // タブを半角スペースに置換
    $content = str_replace( "t", "    ", $content );
 
    return '<pre class="' . esc_attr(implode($class, ' ')) . '">' . trim($content) . '</pre>';
}
add_shortcode( 'code', 'shortcode_code' );


/**
 * フィルターより前にショートコードを実行させる
 */
function code_run_shortcode( $content ) {
    global $shortcode_tags;
 
    // ショートコードの登録情報のバックアップ
    $orig_shortcode_tags = $shortcode_tags;
 
    // ショートコードの登録情報の削除
    remove_all_shortcodes();
 
    // 利用するショートコードの登録
    add_shortcode( 'code', 'shortcode_code' );
 
    // 登録したショートコードの実行
    $content = do_shortcode( $content );
 
    // ショートコードの登録情報の復元
    $shortcode_tags = $orig_shortcode_tags;
 
    return $content;
}
add_filter( 'the_content', 'code_run_shortcode', 7 );

この後、投稿や、固定ページ内で、

[code][/code]

とhtmlやphpコードを囲む。

コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>