ブログ

【WordPress】ソースコードを載せるプラグイン

開発系のブログを書いていると、ソースコードを表示して説明したい時があります。そんな時はプラグインか自分で組み込む必要があるのですが、簡単にやるならプラグインを入れてしまえばいいでしょう。

なので、今回はWordPressでソースコードの表示に便利なプラグインについてご紹介したいと思います。

ことのはじまり

ブログでソースコードを載せる機会が多くなってきたので、シンタックスハイライター(コードの一部分を異なる色やフォントで表示)のプラグインを導入していました。

以前は「Crayon Syntax Highlighter」というプラグインを使っていましたがメニューが特に気に食わなかった。言葉だと分かりづらいので、画像でご紹介します。

 

 

本当に素晴らしいプラグインだと思うのですが上記の問題が嫌でして…なんとかならないかな~って思っていたところ良さげなプラグイン「Prism Syntax Highlighter」というプラグインを見つけたので、ご紹介したいと思います。

Prism Syntax Highlighter

Prism Syntax Highlighterとは?

最新のWeb標準向けに作られた、軽量で拡張可能なシンタックスハイライターのWordPressプラグイン。

利用するとこんな感じで表示される。

console.log('Hello World');

メリット

軽い

以前使用していた「Crayon Syntax Highlighter」では、スライドメニューの問題がありました。このメニューは動作的にも重いものになっていました。

対応言語が多い

「Crayon Syntax Highlighter」と比較すると圧倒的に対応言語が多いです。また「Prism」で新しい言語を定義する事も出来るそうです。

プラグインを使っているから勿論それはやりたくないですが…まぁやろうと思えばできるって事を頭に入れておきます。

追加機能の切り替え

「Crayon Syntax Highlighter」では機能の切り替えは出来ましたが、メニュー表示・非表示などかゆい所に手が届きませんでした。

それに比べて不必要な機能が少なく、かつプラグイン内の拡張機能で切り替えも可能なのです。

インストール方法

検索して入れるだけですが、軽く書きます。

プラグインの新規追加

WordPress管理画面のメニューからプラグイン⇒新規追加を選択します。

「Prism Syntax Highlighter」で検索してインストール

プラグインの設定

WordPress管理画面のメニューからプラグイン⇒インストール済みプラグインを選択します。

「Prism Syntax Highlighter」ですが、この画面で見ると「Prism For WP」になっています。意図は分からないです。

 

上記が設定画面になっています。

  1. テーマ色が変更できます。Previewで確認して好みの色を選びましょう。
  2. シンタックスハイライトする言語を選択します。必要な言語だけを入れましょう。
  3. プラグイン内に拡張機能がついています。これを利用するとコードをコピーするボタンや、行数を表示する事ができます。

まとめ

WordPressでソースコードを簡単に載せるならこのプラグインを入れればいいかなって思いました。ただプラグインが更新されなかったり、セキュリティーや動作的にも心配な点があります。

僕はPrismを直接入れることはしませんでしたが、苦でない人はプラグインを利用せずにPrism本体を入れる方がよりいいと思います。

そこらへんは自分の裁量でいいのではないでしょうか。以上ありがとうございました。