WP SyntaxHighlighterを見つけた!

写真はビビハニム・モスクです。
191116

WPSyntaxHighlighter

wp-syntaxhighlighter を参照

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

preボタンは、ドラッグした箇所をハイライト対象にしてくれるもの。
codeボタンは、ソースコードを貼り付けて挿入するもの。
わたしは、ほとんどcodeボタンしか使ってませんが、状況に応じて使いわけるといいでしょう。
preボタンの使い方
preボタンの場合は、まずビジュアルエディタにプログラムコードを書き込みます。例として以下のようなhtmlコードを書きました。

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

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

SyntaxHighlighterが適応されます。

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

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

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

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

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

スポンサード リンク
WP SyntaxHighlighterのいいところ
ソースを切れに表示させるSyntaxHighlighterをWordPressでも簡単に使わせてくれる点はもちろんですが、もう1点。
ショートコードを使わなくていい点がわたしは好きです。他の有名な「SyntaxHighlighter Evolved」はショートコードありきの設計になっています。
わたしはショートコードがあまり好きではなく、それはそのプラグインの開発が終わってしまった途端に(もしくはそのプラグインを利用しなくなった時点で)ゴミのコードになってしまうからですね。
今後のことを考えるとなるべくなら使わない方がいいということで、WP SyntaxHighlighterに軍配をあげています。
おわり
(写真はY.O.氏から借用)

↑人気ブログランキングに参加しています。ポチっと1票を!