WordPressでソースコードを綺麗に表示させる方法【読者想いのテクです】

WordPressでソースコードを記載したいんだけど、プラグインの「Prism Syntax Highlighter」ってどうなんだろう？

上記のような疑問を解決します。

本記事の内容

この記事を書いている私は、業界歴10年ほどのシステムエンジニアのサラリーマンブロガーです。普段からブログにプログラムソースコードを載せている私が使っているプラグインをご紹介します。

ぜひご覧ください。

ちなみに、動作も軽快です。（本記事の結果）

WordPressでソースコードを綺麗に表示させる方法【読者想いのテクです】

WordPressでソースコードを綺麗に表示させたい場合には、「Prism Syntax Highlighter」というプラグインを使うと良いです。

「Prism Syntax Highlighter」のインストール

プラグインの「新規追加」をします。

次に、「Prism Syntax Highlighter」を検索し、「今すぐインストール」をクリック。

インストールできたら、「有効化」をクリック。

下記のように表示されればOK。インストール&有効化が完了です。

「Prism Syntax Highlighter」の設定

次に、細かな設定に移ります。「設定」箇所をクリック。

下記のような画面になりますので、自分の用途に合わせて設定します。

設定：テーマ

各テーマの見た目については、次のとおりです。

テーマ①：Default

テーマ②：Coy

テーマ③：Dark

テーマ④：Okaidia

テーマ⑤：Tomorrow

テーマ⑥：Twilight

デザインについては上記のとおりです。自分のブログに合ったデザインのものを選びたいところです。

設定：言語

ここは、自分が利用したい言語を選択すればOKです。

設定：プラグイン

私のおすすめは、次の２つです。

上記のとおりです。

初めて使ったときには、行番号のチェックボックスを入れておらず、少し苦戦しました。（後で理由が分かるかと思います。）

「Prism Syntax Highlighter」の使い方

使い方は簡単ですが、画像を見ながら確認ください。

投稿記事にソースコードを記載する。

投稿記事の画面を開くと下記のようなボタンが登場していますので、押下します。

すると、下記のような設定項目が表示されるので、用途に応じて設定します。

ざっくり説明は下記です。

実際の見た目

この記事に実際のソースコードを埋めてみました。スクロールバーも表示されますし、見やすいです。

if(has_post_thumbnail($id)) {  //$img = wp_get_attachment_image_src(get_post_thumbnail_id($id),array($img_width,$img_height));$img = wp_get_attachment_image_src(get_post_thumbnail_id($id));  //$img_tag = "<img src='" . $img[0] . "' alt='{$title}' width='190' height='107' />";$img_tag = "<img src='" . $img[0] . "' alt='{$title}'  />"; }else{  $img_tag ='<img src="'.$no_image.'" alt="" width="'.$img_width.'" height="'.$img_height.'" />'; }

=====

今日のところは、以上です。
動作も軽いし、言うことなしです。

【Related】: WordPressのエディタが使いづらい場合は、旧エディタがおすすめです。

【Related】: ブログを継続するコツ【自分のやる気スイッチをONにしよう】