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 {
    ....;
}
  • このエントリーをはてなブックマークに追加

関連記事

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

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

管理画面のCSSをカスタマイズ

管理画面のスタイルを変更したくなったので、カスタマイズしてみました。一例として以下を取り上げてみます。 「投稿一覧」の画面でカスタムフィールドが追加されていくと、そんなに幅が必要のないところが長くな

Twenty Twelve "コメントをどうぞ"を消す

今回は「Twenty Twelve」で標準で投稿タイトル下に出力されるリンク"コメントをどうぞ"|"Leave a reply"を非表示にする方法を。(コメントやピンバックが1件の場合は"1件のフィー

Twenty Twelve サイトタイトルをテキストから画像に置き換え

ページトップに表示されるサイトタイトルをデフォルトのテキストから画像に変更します。 あらかじめ、管理画面のメディアライブラリから画像をアップロードしているもしくは別の場所に保存しているそのファイルの

no image

ソーシャルボタン設置 プラグイン

各種メジャーなソーシャルメディアボタンを設置できるプラグイン WP Social Bookmarking Light 国産プラグイン。国産ゆえ、はてなボタンの設置も可能 ダウンロード Twe

「カテゴリー」ウィジェット カスタマイズ

「カテゴリー」ウィジェットは、管理画面ではあまりカスタマイズできません。必要であれば、フックやプラグインを用いて表示設定などの変更を行うことができます。 目次 「カテゴリー」ウィジェットの追加

Twenty Thirteen ナビゲーションメニューを固定

ナビゲーションメニューを固定にしてみました。下方にスクロールしても最上部に固定されるやつです。 スクリプト 以下のjsファイルを用意して下さい。 nav要素のidは、ソースもしくはheade

Lightbox (画像ポップアップ) プラグイン

WordPressで使用できるLightbox(画像ポップアップ)プラグインのまとめ ひとまずインストール・有効化するだけで使用可能です。(3.7/3.8/3.9) blueimp lig

折りたたみ要素やタブなどをショートコードで実装できるプラグイン「Arconix Shortcodes」

「Arconix Shortcodes」は、投稿内にショートコードでいろいろな要素を実装できるプラグインです。ダウンロードはこちらからできます。ダウンロード・解凍してpluginsディレクトリにアップ

Twenty Fourteen "コメントをどうぞ"の非表示と変更方法

Twenty Fourteenでは、デフォルトで投稿ページと各アーカイブページの各投稿のメタ情報欄に「コメントをどうぞ」というコメントフォームへのリンクが設置されます。 それぞれ、コメントが0件の場

Message

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

*

PAGE TOP ↑