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 Fourteenカスタマイズ用プラグインと派生テーマ

WordPressの現在のデフォルトテーマ「Twenty Fourteen」のカスタマイズに便利なプラグインと、「Twenty Fourteen」をもとに作成されたテーマのまとめです。 カスタマ

テーブル実装プラグイン「TablePress」 + レスポンシブ対応

「TablePress」は、WordPressにテーブルを実装できるプラグインです。専用のレスポンシブ化のプラグインもリリースされています。ダウンロード デモ (PCの場合はブラウザの幅狭めてみたり

Twenty Fourteen 「投稿者」を非表示

TwentyFourteenでは、シングルページやアーカイブページにそれぞれ「投稿者」が表示されます。投稿者を非表示にさせる方法を投稿してみます。表示させる場合は、以下を参考に表示名などを変更してみて

ie.cssの子テーマ化など Twenty Twelve 1.1での変更点

TwentyTwelveが1.0から1.1にアップデートされたので、勉強もかねていくつか変更点を洗ってみました。 ie.cssを外出し pubdateの削除 rel="generator"

ナビゲーションメニューに検索フォームを追加

メニュー内に検索フォームを追加したいという問い合わせをいただいたので試してみました。 メニューのつくられかた まずは、WordPressでメニューがつくられる手順を説明します。 箱をつく

ログイン画面・機能をカスタマイズ

CSSを変更してスタイル変更 ログイン画面用のCSSを用意して子テーマとして使用します。変更したい部分だけを記述して下さい。 // オリジナル /wp-admin/css/login.min.

独自のCSSやJSを読み込む

WordPressで、プラグインではなく自作したりダウンロードしてきたCSSやJS(プラグイン)を読み込んだりするケースがあると思います。今回は、その際のCSSやJSファイルの使用方法をまとめてみまし

no image

テーマ ブックマーク 2014

有料 技術系・ガジェットサイトテーマ 30 Blog & Magazine Style WordPress Themes for Tech & Gadget Sites

"コメントを残す" 削除・文言を変更する方法

コメントフォームに表示される「コメントを残す」はWordPress標準で翻訳される要素です。テーマ側でカスタマイズしていない限り表示されます。 ここでは、この要素を削除したり、文言を変更する方法を紹

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

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

Message

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

*

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

    PAGE TOP ↑