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

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

スポンサーリンク

Syntax Highlighter Evolved

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

プラグインの検索

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

プラグインの検索

有効化

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

プラグインの有効化

プラグインの設定

設定画面へ移動

「設定」→「SyntaxHighlighter」

設定画面へ移動

設定

SyntaxHighlighterの設定画面

①バージョン

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

②テーマ

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

ソースコードの表示スタイルの選択

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

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

「全てのブラシを読み込む」チェック

④一般

規程の設定(一般)

ア.行№を表示する。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ケ.行番号の開始

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

コ.行番号の余白

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

サ.タブのサイズ

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

シ.タイトル

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

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

プラグインの使い方

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

<meta name=”robots” content=”noindex” />

②CSS

.article h4 {
    border-left: 30px solid #ff6666;
    border-bottom: 0px;
    padding: 5px 0 5px 10px;
    margin-bottom: 30px;			
}			

③PHP

<?php
  $time = date("西暦Y年n月j日 Ah:i");
  print($time);
?>
スポンサーリンク

Crayon Syntax Highliter

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

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

プラグインの検索

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

プラグインの検索

有効化

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

プラグインの有効化

プラグインの設定

設定画面へ移動

「設定」→「Crayon」

設定画面へ移動

設定

Crayonの設定画面

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

プラグインの使い方

ソースコードの入力

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

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

新規投稿画面の表示

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

ソースコード挿入画面

 

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

③ソースコードの入力

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

ソースコードの入力

④記事の公開

記事の公開

ソースコードの修正

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

ソースコードの修正

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

ソースコードの更新

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

記事内のソースコードを閲覧者は簡単にソースコードをコピペすることができます。ソースコードの上にマウスを合わせると、メニューバーが表示されますので、コピーを押下すると、Box内のコードが全選択されます。

ソースコードのコピー

コメント