記事の中で、ソースコードを書いて、説明しなければならないケースがあります。
そんなときに便利なプラグインが「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のままでＯＫ
- コード：ソースコードを入力します。
- テーマ：表示デザインを選ぶことができます。
③ソースコードの入力
各項目を入力して、「挿入」をクリックします。
④記事の公開
ソースコードの修正
一度挿入したソースコードを修正する場合は、ビジュアルモードから、該当のソースコードをクリックして、<>ボタンを押下します。
Crayon Syntax Highlighterの編集画面が表示されますので、編集が終了したら「更新」を押下します。
ソースコードをコピーする。
記事内のソースコードを閲覧者は簡単にソースコードをコピペすることができます。ソースコードの上にマウスを合わせると、メニューバーが表示されますので、コピーを押下すると、Box内のコードが全選択されます。
コメント