ぱんぶろ

パンジーの「いいね!」ブログ

WordPressでソースコードを見栄え良く表示できるプラグイン「WP SyntaxHighlighter」の使い方

     

syntaxhighlighter-22

WordPressでコードを見栄え良く表示させる方法を紹介です。

「SyntaxHighlighter」というプラグインを使えば、以下のように行番号を表示してくれたりコードをハイライトしてくれたりします。

<!DOCTYPE html>
<html>
<head>
  <title>サンプル表示</title>
  <meta charset="UTF-8">
</head>
<body>
  <p>SyntaxHighlighterを使うとこんな感じになります。</p>
</body>
</html>

それでは、SyntaxHighlighterの使い方を見ていきましょう!

スポンサード リンク

SyntaxHighlighterとは?

Javascriptで作られたプログラミングコードのシンタックスハイライターです。シンタックスハイライターとは、テキストの可読性を向上させる目的で文章の一部を分類ごとに色分けして表示させてくれる機能になります。

シンタックスハイライターはいろんなところが提供してくれていますが、おそらく最も有名なのがSyntaxHighlighterです。

公式サイトはこちらになります。→SyntaxHighlighter

WP SyntaxHighlighterプラグインの使い方

それでは、WordPressのプラグイン「WP SyntaxHighlighter」を見ていきましょう。

インストール

WordPressの管理画面から「プラグイン」→「新規追加」→「WP SyntaxHighlighter」で検索→「インストール」
syntaxhighlighter

インストールしたら有効化しておいてください。

設定

「設定」→「WP SyntaxHighlighter」を選択。
syntaxhighlighter-2

たくさんの設定項目があるので順番に見ていきましょう。

1 基本設定

WP SyntaxHighlighterの基本的な設定を行います。いきなり項目が多くてげんなりしますが、頑張って設定しましょう。まずは、自分の設定を貼り付けます。
syntaxhighlighter-3

意識した方がいい箇所だけピックアップします。

ハイライト表示するページ

syntaxhighlighter-4

コードを記載する場所は全て選びましょう。わたしは記事の中にしか使わないので「投稿と固定ページ」にだけチェックしています。

テーマ

syntaxhighlighter-5

WordPressにもテーマがあるように、SyntaxHighlighterにもテーマがあります。要するに見栄えのことですね。背景を暗めにしたり、明るめにしたりできます。

ドロップダウンリストから選択して「設定を保存」すると、設定ページの一番下に現在の見栄えが表示されますので、確認してみるといいでしょう。
syntaxhighlighter-6

行番号

syntaxhighlighter-7

チェックすると行番号を表示してくれるようになります。

スマートタブ&タブのサイズ

syntaxhighlighter-8

タブで入力された箇所の扱い方を選べます。スマートタブにチェックし、タブのサイズを設定すると半角スペース分の幅で最適化してくれます。

2 ビジュアルエディターの設定

続いて「ビジュアルエディタの設定」です。隠れているのでクリックして開いてあげてください。
syntaxhighlighter-9

TinyMCE ボタンを追加

「Select & Insert」と「Codebox」の両方チェックしておくといいと思います。チェックするとビジュアルエディタにボタンが表示されるようになり、簡単にコードを入力できます。
syntaxhighlighter-10

ウィンドウサイズ

syntaxhighlighter-11

どういうわけか100%だと見きれてしまう部分が出てくるので一番大きい110%にしてあげます。

9 デフォルトの言語

コメントとかウィジェットとかショートコードとか使わないので、3〜8の設定は飛ばして、下の方の「デフォルトの言語」の設定を開いてください。
syntaxhighlighter-12

ここでは装飾(ハイライトする)対象の言語を設定します。投稿時にコードを選択するときなど不要な言語が出てこなくなるので管理がすっきりします。PHP、JavaScriptなど自分が使用したい言語を「有効」にしてあげてください。

「PlainText」は、汎用的なテキストを扱えるので、有効にしてあげると何かと便利です。

使ってみる

設定が終わったところで、実際に使ってみましょう。投稿画面のビジュアルエディタタブを選択します。
syntaxhighlighter-13

preボタンは、ドラッグした箇所をハイライト対象にしてくれるもの。
codeボタンは、ソースコードを貼り付けて挿入するもの。

わたしは、ほとんどcodeボタンしか使ってませんが、状況に応じて使いわけるといいでしょう。

preボタンの使い方

preボタンの場合は、まずビジュアルエディタにプログラムコードを書き込みます。例として以下のようなhtmlコードを書きました。
syntaxhighlighter-14

こういった直接ビジュアルエディタに書き込んだコードに対してSyntaxHighlighterをあてるには、preボタンを利用します。使い方は、コード全体をドラッグしてpreボタンを押すだけです。
syntaxhighlighter-15

preボタンでhtml言語を選択→「挿入」。
syntaxhighlighter-16

SyntaxHighlighterが適応されます。
syntaxhighlighter-17

テキストで見るとこんな感じ。htmlのハイライトが適応されているのが分かります。
syntaxhighlighter-18

codeボタンの使い方

続いてcodeボタンの使い方。こちらは、コードをそのまま貼り付けたい時に利用します。インデントなどもそのまま維持されます。わたしはローカル環境で動作確認したコードを貼ることがほとんどなので、こちらのcodeボタンを利用するほうが圧倒的に多いです。

codeボタンをクリックします。
syntaxhighlighter-19

言語を選択して、コードを貼り付けます。先ほどと同じhtmlコードを貼り付けてみましょう。
syntaxhighlighter-20

挿入ボタンを押すと、貼り付けたコードがそのまま反映されます。preボタンの時と同じ結果になるのが分かります。
syntaxhighlighter-17

表示

実際の表示をプレビューで見てみましょう。例として作成したコードは以下のように表示されるます。ただし、設定で選択したテーマによって見栄えは異なります。
syntaxhighlighter-21

WP SyntaxHighlighterのいいところ

ソースを切れに表示させるSyntaxHighlighterをWordPressでも簡単に使わせてくれる点はもちろんですが、もう1点。

ショートコードを使わなくていい点がわたしは好きです。他の有名な「SyntaxHighlighter Evolved」はショートコードありきの設計になっています。
わたしはショートコードがあまり好きではなく、それはそのプラグインの開発が終わってしまった途端に(もしくはそのプラグインを利用しなくなった時点で)ゴミのコードになってしまうからですね。

今後のことを考えるとなるべくなら使わない方がいいということで、WP SyntaxHighlighterに軍配をあげています。

まとめ

以上、WP SyntaxHighlighterの使い方でした。

ビジュアルエディタから直感的に貼り付けてSyntaxHighlighter機能を利用できるWP SyntaxHighlighterは使い手のことを考えたとても便利なプラグインです。

WordPressにコードを表示させたい方はぜひ利用してみてください!