WordPressでソースコードを記事に載せる際に便利なプラグイン【SyntaxHighlighter Evolved】

今回は、ちょっとマニアックなプラグインのご紹介です。

カスタムの記事を書くときに、ソースコードを記事に書きますが

そのままだと伝わりにくいですよね。

よく解説サイトにあるこんなやつ…。

これ、そのままコピペできるので、記事を読む側としてとても重宝するんですよね！

今日は、その重宝するソースコード記述に役立つプラグインをご紹介します！

このプラグインを使うメリット

このプラグインを使うとこんなメリットがあります。

• ソースコードをきれいに表示させることが出来る。
• 読者はコピー＆ペーストでソースコードを活用しやすくなる。
• 何行目なのか詳細を伝えやすい。
• キレイにまとまり、分かり易くなる。

表示方法を変えたり、様々なコードに対応しているので

プログラムとか、Webの作成やカスタム解説サイトだと特に重宝しますね！

【導入方法】早速インストールをしましょう

今回使うプラグインは【SyntaxHighlighter Evolved】というものです。

このプラグインをインストールにするには

【ダッシュボード】⇒【プラグイン】⇒新規追加で表示される画面の検索ボックスで

【SyntaxHighlighter Evolved】と検索すると出てきます。

尚、プラグインのインストール方法についてはこちらで解説しています。

⇒機能拡張！簡単なプラグインのインストール方法

【SyntaxHighlighter Evolved】プラグインが表示されたら、

【いますぐインストール】と書かれた箇所をクリックしてインストールして下さい。

これだけで、インストールが完了します。

***

尚、ダウンロードしてインストールをする場合は、下記のアドレスからダウンロードできます。

⇒https://wordpress.org/plugins/syntaxhighlighter/

この場合も有効化を忘れずに行って下さい。

利用するための準備はこれで完了です。

プラグインの設定方法と使い方

設定画面へアクセスしてみましょう。

【ダッシュボード】⇒【設定】⇒【SyntaxHighlighter Evolved】の順でクリックすると

設定画面が開きます。

下図の様な画面が表示されます。

設定画面が日本語なので、あまり迷う事はないと思いますが

実際にこの設定だとどう表示されるのかが分からなくならない様

便利なプレビュー画面を見る機能がついています。

プレビュー機能の使い方

設定を変更する際に、基本的に操作するのは

テーマ（見た目）

一般（各種設定）

行番号の開始（解説するコードが1行目行こうから始まる場合に行数を合わせると親切）

この3つになると思います。

勿論、その他の設定を操作しても問題あはありません。

まずは、変更させたい箇所を設定します。

次に、ページ中央にあるボタンをクリックします。

すると、下図の様に、ボタンの下に実際にどのように表示されるのか

プレビュー画面を見る事が出来ます。

簡単な使い方

使い方はとっても簡単で

ソースコードを、[表記したい言語] と [/表記したい言語]のタグで、”[]”で囲むだけです。

1点注意点として、入力は、テキストとモードで行ってください。

後は、プラグインが勝手にやってくれるので、他はいじらなくて大丈夫です！

使える言語一覧

使える言語一覧です。

[]に入力する時は、右側の方のものを入力すればOKです。

以上です。

とても簡単に使えるので、コードを表示させる解説ページを作る際に是非ご活用くださいね！