投稿記事内に、ソースコードを表示できるプラグイン(WordPress)

記事の中で、ソースコードを書いて、説明しなければならないケースがあります。
そんなときに便利なプラグインが「Syntax Highlighter Evolved」です。SyntaxHighlighter系のプラグインとしては、他には、「Cayon Syntax Highlighter」が有名です。今回は、2つのプラグインをご紹介します。

スポンサーリンク
投稿本文(h2)

Syntax Highlighter Evolved

プラグインのインストール

プラグインの検索

「SyntaxHighliter Evolved」と、SyntaxとHighlighterの間は詰めて、HighlighterとEvolvedの間は1つスペースを空けて検索して下さい。
ev-install1
ev-install1

有効化

「有効化」をクリックします。
ev-install2
ev-install2

プラグインの設定

設定画面へ移動

「設定」→「SyntaxHighlighter」
ev-setting1
ev-setting1

設定

ev-setting2
ev-setting2

①バージョン
  • バージョン2.X:行の折り返しが可能で、コピーや印刷等のツールバーが表示されます。
  • バージョン3.X:ツールバーはなく、ソースが長い場合は、スクロールバーが表示されます。

②テーマ

ソースコードの表示スタイルを7種類より選択します。

ev-setting3
ev-setting3

③全てのブラシを読み込む

通常はチェックを外しておきます。

ev-setting4
ev-setting4

④一般

ev-setting5
ev-setting5

ア.行№を表示する。

コードボックスの左側に行番号を表示する場合は、チェックを入れる。

イ.ツールバーを表示する。

a.バージョン2.X:ソースコード右上にツールバーが表示されます。
b.バージョン3.X:ソースコード右上にクレジットマークが表示されます。

ウ.自動リンクを有効にする。

ソースコード中のURLに自動リンクを貼る場合は、チェックを入れる

エ.コードボックスの表示を閉じておく。

デフォルトで、コードボックスの表示を閉じておき、クリックで展開する場合は、チェックを外しておく。

オ.軽い表示モードを使う。

行番号やツールバーが表示されません。

カ.インデントタブを許容するスマードタブを使う。

ソースコード内でダブを使う場合は、チェックを入れる。

キ.長い行を折り返す。(バージョン2.Xのみ)

横スクロールバーを使わずに折り返す場合は、チェックを入れる。

ク.追加のCSSのclass名(複数可能)

コードボックス内のDivタグに対して、classを指定したCSSを記入する場合

ケ.行番号の開始

行番号の開始番号。通常1を記入

コ.行番号の余白

行番号の桁数を指定します。

サ.タブのサイズ

タブの長さを指定します。

シ.タイトル

コードボックス上部に表示されるテキストを設定します。

⑤変更を保存
設定が終わったら、画面下のプレビューで確認して、「変更を保存」をクリックします。

プラグインの使い方

表示したいソースコードをショートコードで囲みます。
①HTML

②CSS

③PHP

Crayon Syntax Highliter

記事の中で、ソースコードをきれいに表示できるWordPressのプラグインです。SyntaxHighlighter系のプラグインとしては、「Syntax Highlighter Evolved」と並んで有名な「Cayon Syntax Highlighter」をご紹介します。

プラグインのインストール

プラグインの検索

「Crayon Syntax Highliter」と入力して、表示されたら「今すぐインストールをクリックします。
cy-install1
cy-install1

有効化

「有効化」をクリックします。
cy-install2
cy-install2

プラグインの設定

設定画面へ移動

「設定」→「Crayon」
cy-setting1
cy-setting1

設定

cy-setting2
cy-setting2

プラグインの設定は、特に変更しなくともデフオルトのままで利用できます。

プラグインの使い方

ソースコードの入力

プラグインをインストールすると、記事編集エディターに専用のボタンが追加され、そのボタンをクリックすると、ソースコードの挿入画面が表示されます。
①新規投稿画面の表示

テキストモードのメニューボタンから「Crayon」をクリックします。

cy-op1
cy-op1

②ソースコード挿入画面の表示

cy-op2
cy-op2

  • タイトル:ソースコードについて任意のタイトルを設定できます。
  • プログラム言語:DefaultのままでOK
  • コード:ソースコードを入力します。
  • テーマ:表示デザインを選ぶことができます。

③ソースコードの入力

各項目を入力して、「挿入」をクリックします。

cy-op3
cy-op3

④記事の公開

cy-op4
cy-op4

ソースコードの修正

一度挿入したソースコードを修正する場合は、ビジュアルモードから、該当のソースコードをクリックして、<>ボタンを押下します。
cy-op5
cy-op5

Crayon Syntax Highlighterの編集画面が表示されますので、編集が終了したら「更新」を押下します。
cy-op6
cy-op6

ソースコードをコピーする。

記事内のソースコードを閲覧者は簡単にソースコードをコピペすることができます。ソースコードの上にマウスを合わせると、メニューバーが表示されますので、コピーを押下すると、Box内のコードが全選択されます。
cy-oop7
cy-oop7
スポンサーリンク
投稿本文(h2)
投稿本文(h2)

フォローする