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

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

プラグインの設定
設定画面へ移動
「設定」→「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」をクリックします。

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

- タイトル:ソースコードについて任意のタイトルを設定できます。
- プログラム言語:DefaultのままでOK
- コード:ソースコードを入力します。
- テーマ:表示デザインを選ぶことができます。
③ソースコードの入力
各項目を入力して、「挿入」をクリックします。

④記事の公開

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

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

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

コメント