今まであまり使ってこなかったプラグインだけれど、自宅サーバー関連の覚え書きで使うことが増えたので、このプラグインの使い方をお浚いと覚え書きをかねて記事にすることにしました。
SyntaxHighlighter evolvedのインストール
管理画面 → プラグイン → 新規追加 → SyntasHighligtherで検索 → インストール → 有効化
SyntaxHighlighter evolvedの設定
SyntaxHilighterのバージョン
バージョン2とバージョン3があります。
- バージョン2は行の折り返しが許可されています。
この機能はバージョン3ではサポートされていません。 - バージョン3は、訪問者が簡単にマウスを使用して（ドラッグかダブルクリック）、コードの部分を強調表示し、クリップボードにへコピーできます。
Flashベースボタンを含むツールバーが不要です。
当ブログではバージョン2を使用しています。
テーマ
テーマは8種類あり、いずれか1つを選択することができます。
- デフォルト
- Django
- Eclipse
- Emacs
- Fade to Grey
- Midnight
- RDark
- [なし]
すべてのブラシを読み込む
☑を入れると動作が重くなるので外しています。
実装
利用方法は、コードの前後を[言語の名称]と[/言語の名称]で囲むだけです。
ショートコードパラメータ
- lang または language — ハイライトするコードの言語。パラメータ指定だけでなく［php]code[/php] のように言語をタグとして記述できます。
- autolinks — 自動リンクの有効・無効
- classname ─ コードBOXに追加するCSSのclass
- collapse ─ コードボックスをデフォルトの状態で閉じるかどうか。コードボックスを開くにはクリックが要求されます。長いコードの出力の際に有効です。
- firstline ─ 行番号の出力の際に、最初の行の番号を表す数値
- gutter ─ 左側に行番号を配置するかどうか
- highlight ─ ハイライトする行番号のカンマ区切りのリスト。範囲を指定することもできます。 例:2,5-10,12
- htmlscipt ─ HTML/XML をハイライトするかどうか。HTMLウェブページで PHP を使うようにHTML/XMLとプログラムが混在するような時に有効です。上のプレビューではこの設定が有効になっています。これは特定の言語でしか動作しません。
- light ─ 行番号やツールバーを無効にする軽い表示モードのオン・オフ
- padlinenumbers — 行番号の余白。有効な値は、 <code>false</code>(余白なし), <code>true</code> (自動)、数値(余白)
- title (v3のみ) — コードの前に表示される表題テキスト。collapseのパラメータと合わせて使うと有効です。
- toolbar — ツールバーのオン・オフ(v2のボタン、v3のクエスチョンマーク)
- wrapline (v2のみ) — 折り返しの有効・無効
- quichkcode — Enable edit mode on double click.
対応言語
| Brush name | Brush aliases | File name |
|---|---|---|
| ActionScript3 | as3, actionscript3 | shBrushAS3.js |
| Bash/shell | bash, shell | shBrushBash.js |
| ColdFusion | coldfusion | shBrushColdFusion.js |
| C++ | cpp, c | shBrushCpp.js |
| C# | c-sharp, csharp | shBrushCSharp.js |
| CSS | css | shBrushCss.js |
| Delphi | delphi, pas, pascal | shBrushDelphi.js |
| Diff | diff, patch | shBrushDiff.js |
| Erlang | erlang | shBrushErlang.js |
| Groovy | groovy | shBrushGroovy.js |
| Java | java | shBrushJava.js |
| JavaFX | jfx, javafx | shBrushJavaFX.js |
| JavaScript | js, jscript, javascript | shBrushJScript.js |
| Perl | perl, pl | shBrushPerl.js |
| PHP | php | shBrushPhp.js |
| Plain Text | plain, text | shBrushPlain.js |
| PowerShell | ps, powershell | shBrushPowerShell.js |
| Python | py, python | shBrushPython.js |
| Ruby | rails, ror, ruby | shBrushRuby.js |
| Scala | scala | shBrushScala.js |
| SQL | sql | shBrushSql.js |
| Visual Basic | vb, vbnet | shBrushVb.js |
| XML | html, xhtml, xml, xslt | shBrushXml.js |
SyntaxHighligher Evolved がうまく機能しないとき
各種設定が終わり、プレビュー画面をみてもレイアウトが崩れていたりして全然うまく表示されない…。
調べてみると、syntaxHighlither系のプラグインは色々な原因で不具合が生じる事があるようです。
optimize系プラグインとの競合
optimize系プラグインで、SyntaxHighlitherのJavaScriptの最適化を行おうとして失敗しているようです。
この場合はoptimize系プラグインの設定で、JavaScript コードの最適化をオフにする。
或いは、SyntaxHighlighter Evolved プラグインの設定で、バージョン「2.x」を使用することで動作する場合があります。
当ブログはWP-Optimizeを利用しているため、Ver.2.xを選択することで機能するようになりました。
phpヘッダー内の＜?php wp_head(); ?＞記述の欠落
header.php内に下記の記述があるかを確認してください。
この記述がないとsyntaxhighlighter Evolvedは動作しません。
<?php wp_head(); ?>
phpフッター内の＜?php wp_footer(); ?＞記述の欠落
footer.php内に下記の記述があるかを確認してください。
この記述がないとsyntaxhighlighter Evolvedは動作しません。
<?php wp_footer(); ?>
現状では特別に何か弄ったということもないので、有事の際は再インストールすれば良いかと。
コメント