このサイトで最もアクセス数が多いのは、BizVektor関連、それもカスタマイズ関係の記事に集中している。そこでCSSやPHPのソースコードをハイライト表示できるSyntaxHighlighterというPluginを導入してみた。導入自体は簡単で、日本語にも対応している。
SyntaxHighlighter Evolved
<br />#main #container #sideTower { float:right; width:220px; }<br />body.left-sidebar #main #container #content { float:right; }<br />body.left-sidebar #main #container #sideTower { float:left; }<br />form#searchform input#s {width:120px; }<br />form#searchform input#searchsubmit { width:20%; }#topMainBnr { width:100%; }<br />#topMainBnr img { width:950px !important; }<br />#topMainBnrFrame .slider li { }<br />#topMainBnrFrame { width:950px;min-height:250px; }<br />
WordPress管理画面のプラグインインストールのページで「SyntaxHighlighter」で検索すると、かなりの数のPluginが表示される。また、Googleで「ソース ハイライト plugin」で検索すると、どれを選べばよいか迷うほどのPluginが出てくる。中でよさそうなものとして出てきたのが、SyntaxHighlighter Evolvedであった。早速インストールしてみた。インストール後の初期設定は、ほとんど問題無しに終わる。早速以前の記事でCSSのコードをそのまま表示していたページに行き、SyntaxHighlighter Evolvedを使用してみた。CSSの場合、
[CSS]この間にコードを入れる[/CSS]
とすればよいことは分かったが、行表示やハイライト表示をどうすれば良いのかが分からない。導入を薦めているサイトを見ると、開始行を指定する場合は、firstline=”999″のように記述するとある。同じような説明をしているほかのサイトも見たが、それを何処にどうやって記述するかについては触れていない。その問題の回答を与えてくれたのは、SyntaxHighlighter Evolvedの設定ページであった。良く見ると、ショートコードパラメーターの書き方が書いてある。要は、
［css firstline=”11″ highlight=”11,13,16,19″］ここにコードを入れる[/css]
という風に書けばよいらしい。こうすれば11行から開始され、11行、13行、16行、19行がハイライトされることになる。しかし、いろいろ指定できるようだが、開始行とハイライト行が指定できればそれ以上は必要なさそうである。それにそうしよっちゅうSyntaxHighlighterを使うわけではないことから、使う度に書き方を確認することになりそうである。もっと簡単なPluginはないものか・・・・・・・探すとありました。
SyntaxHighlighter TinyMCE Button
このPluginは、使っているSyntaxHighlighterとビジュアルエディター TinyMCEを組み合わせることで、2つのボタンで記事へのソースコードの挿入、パラメーターの入力、パラメーターの変更などを簡単に行うことが出来るということである。早速インストールした。WordPress管理画面のプラグインインストールのページで「SyntaxHighlighter」で検索すると、2番目にSyntaxHighlighter TinyMCE Buttonが表示された。インストールと有効化を行うと、設定欄にSE TinyMCE Buttonが表示される。設定は一番上にある使用中のプラグインでSyntaxHighlighter Evolvedを指定するだけとした。後はデフォルトの設定で何の問題も無いと思われる。
二つのボタンで簡単に設定可能
ビジュアルエディターにpreとCORDの二つのボタンが用意された。preの使用法は、既に書かれたコードを選択して反転させ、preをクリックすることでハイライト表示できる。行番号やハイライト行などは出てきたポップアップメニューで指定することになる。
#main #container #sideTower { float:right; width:220px; }
body.left-sidebar #main #container #content { float:right; }
body.left-sidebar #main #container #sideTower { float:left; }
form#searchform input#s {width:120px; }
form#searchform input#searchsubmit { width:20%; }#topMainBnr { width:100%; }
#topMainBnr img { width:950px !important; }
#topMainBnrFrame .slider li { }
#topMainBnrFrame { width:950px;min-height:250px; }
CODEは、コードを入れたいところでクリックする。するとコードの入力用ポップアップメニューが現れ、そこにコピー＆ペーストでコードを貼り付ける。開始行やハイライト行の指定は、preとまったく同じ形で指定することが可能である。
