Google Code Prettifyを使用してソースコードを表示をしてくれる「Prettify Code Syntax」

Prettify Code Syntaxは、WordPressでGoogle Code Prettifyを使用してソースコードを表示してくれるプラグインです。
プラグインダウンロード
Google Code Prettifyのページ

使用方法

インストールして、投稿内でコードを以下のように囲めば表示してくれます。

<pre class="prettyprint lang-php">
<?php echo "Hello World"; ?>
</pre>
<?php echo "Hello World"; ?>

テーマ

管理画面の「設定」→「Prettify Code Syntax」のStyleタブであらかじめ用意されたテーマを選択するかcustomの項でCSSを直書きしてスタイリングすることができます。

折り返し

はみでる場合に横スクロールバーを表示するのではなく折り返すようにするには、以下をstyle.cssに追加して下さい。

.entry-content pre.prettyprint,
.comment-content pre.prettyprint {
  white-space: pre-wrap;                 /* css-3 */
  white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
  white-space: -pre-wrap;                /* Opera 4-6 */
  white-space: -o-pre-wrap;              /* Opera 7 */
  word-wrap: break-word;                 /* Internet Explorer 5.5+ */
}

参考:Wrapping Text Inside Pre Tags

CDN使ってみる

ここで見つけたのでこれにしてみました。cdnjs - the missing cdn
また、投稿・固定ページのみで読み込みを行うようにします。本当は、[SyntaxHighlighter Evolved]のように使用するページのみでインクルードするようにしたらいいんですが、今回はページのタイプのみで振り分けしています。

add_action( 'wp_enqueue_scripts', 'my_prettify', 1001);
function my_prettify() {
    wp_deregister_script( 'prettify');
    wp_deregister_style( 'prettify');
    wp_dequeue_script( 'prettify-load');
    if ( is_single() || is_page()){
        wp_enqueue_style( 'prettify', '//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.css', array(), null );
        wp_enqueue_script( 'prettify', '//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.js', array(), null, true );
        wp_enqueue_script( 'prettify-load');
    }
}

スタイルをカスタマイズする場合は、子テーマのstyle.cssに以下のように追記するかたちにすれば、CSSもCDNのものを利用できます。

.entry-content pre.prettyprint,
.comment-content pre.prettyprint {
    ....;
}
  • このエントリーをはてなブックマークに追加

関連記事

Twenty Twelve 投稿日・投稿者を非表示に

TwentyTwelveのちょっとした部分をカスタマイズする方法を紹介していきます。 また、子テーマで出力部分を変更する際に、翻訳が必要な部分//_()の部分がでてきますので、以下の投稿も参考に

Twenty Thirteen カスタマイズ

WordPress 3.6のデフォルトテーマである「Twenty thirteen」のカスタマイズをまとめて投稿します。 Twenty thirteenのカスタマイズネタがあまりないです。(それだけ

「Google Analytics for WordPress」投稿URLにやたら長いパラメータがついてしまう

Google 検索結果をみていたら、Wordpressの投稿のURLが実際のものより異様に長くなっているので何かなと思って調査してみました。 このような感じで http://kwski.net/ca

プラグイン関連のJSやCSSの読み込みをフィルター

プラグインをインストールしていくとheadやfooter内がCSSやJSで溢れていきます。できるだけ、自分で書けるものに関しては、余計なコールが少なくなるので可能な場合はそうしていますが(そうもいかず

条件を付けて訪問時に開くポップアップを実装できる「WordPress Popup」

「WordPress Popup」は、ユーザの訪問時にポップアップを開くように実装できるプラグインです。それぞれ条件によって開くかどうかを設定することができます。 ダウンロード / サンプル イン

コメントフォーム・リストのカスタマイズ

コメント投稿部分は、基本的にはどのテーマでも同じフォームを出力してテーマのstyle.cssで外観を変えています。コメントフォーム欄をカスタマイズするには、プラグインもしくはフックを用いてカスタマイズ

JSやCSSに自動で付与されるバージョン番号を非表示に

Wordpressでは、JSやCSSがロードされる際にlinkタグやscriptタグ内にWordpressやプラグインもしくはスクリプトそのもののバージョン番号が付与されます。「?ver=」で検索して

no image

「最近の投稿」ウィジェット カスタマイズ

目次 ウィジェットを削除 標準の設定 特定のカテゴリーに属する投稿を除外 カスタマイズ プラグイン 「最近の投稿」ウィジェットを削除 「最近の投稿」ウィジェット

Twenty Twelve "Open Sans"の使用を止

「Twenty Twelve」では、"スペシャルフォント"ということで「Open sans」を特別にロードしているようです。今のところ使うつもりがないのでリンクしないようにしました(必要になれば戻せば

コメント欄停止・コメント削除

WordPressでは標準でコメント機能が付いてきます。この投稿ではコメント機能の停止や既に投稿されたコメントを削除する方法を紹介します。 設定による停止方法 新規の投稿に関してコメントを停止

Message

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

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑