SyntaxHighlighter
機能
- ソースコードの見やすく整形してくれる。
- 記事投稿は、もとのソースコードをコピー・ペーストするだけ。
- プログラム言語を指定することで言語にあった整形ができる。
現在使用中のバージョン
SyntaxHighlighter 2.3.8 を使用。
ダウンロード
WordPress : SyntaxHighlighter ≪ WordPress Plugins
アップグレード履歴
ver.1.1.2 インストール ： 管理画面のプラグインブラウザ/インストーラ機能からインストール。
ver.1.1.2 → ver.2.0.0 ：自動アップグレード SyntaxHighlighter ver.1.1.2 から ver.2.0.0 へアップグレード – WordPress の砂場
ver.2.0.0 → ver.2.0.1 ：自動アップグレード SyntaxHighlighter ver.2.0.0 から ver.2.0.1 へアップグレード – WordPress の砂場
ver.2.0.1 → ver.2.1.0 ：自動アップグレード SyntaxHighlighter ver.2.0.1 から ver.2.1.0 へアップグレード – WordPress の砂場
ver.2.1.0 → ver.2.2.0 ：自動アップグレード SyntaxHighlighter ver.2.1.0 から ver.2.2.0 へアップグレード – WordPress の砂場
ver.2.2.0 → ver.2.2.1 ：自動アップグレード SyntaxHighlighter ver.2.2.0 から ver.2.2.1 へアップグレード – WordPress の砂場
ver.2.2.1 → ver.2.2.2 ：自動アップグレード SyntaxHighlighter ver.2.2.1 から ver.2.2.2 へアップグレード – WordPress の砂場
ver.2.2.2 → ver.2.3.0 ：自動アップグレード SyntaxHighlighter ver.2.2.2 から ver.2.3.0 へアップグレード – WordPress の砂場
ver.2.3.0 → ver.2.3.1 ：自動アップグレード SyntaxHighlighter ver.2.3.0 から ver.2.3.1 へアップグレード – WordPress の砂場
ver.2.3.1 → ver.2.3.3 ：自動アップグレード SyntaxHighlighter ver.2.3.1 から ver.2.3.3 へアップグレード – WordPress の砂場
ver.2.3.3 → ver.2.3.4 ：自動アップグレード SyntaxHighlighter ver.2.3.3 から ver.2.3.4 へアップグレード – WordPress の砂場
ver.2.3.4 → ver.2.3.5 ：自動アップグレード SyntaxHighlighter ver.2.3.4 から ver.2.3.5 へアップグレード – WordPress の砂場
ver.2.3.5 → ver.2.3.6 ：自動アップグレード SyntaxHighlighter ver.2.3.5 から ver.2.3.6 へアップグレード – WordPress の砂場
ver.2.3.6 → ver.2.3.8 ：自動アップグレード SyntaxHighlighter ver.2.3.6 から ver.2.3.8 へアップグレード – WordPress の砂場
ドキュメント
SyntaxHighlighter – Alex Gorbatchev
CSS の調整
使用しているテーマ（wp.Vicuna）がプラグインの CSS と相性がよくないので対応させる。
Google Chrome では１行で収まらない場合は折り返して表示していて見づらいので、はみ出している部分はスクロールで見るようにしていたが、ver.2.0.0 からは、全てのブラウザで折り返し部分にアイコンが表示されだしたので、この処理は削除。
SyntaxHighlighter のプラグインを直接カスタマイズするとバージョンアップの度に対応するのが大変なので、別途 CSS ファイルを作成する。
別途作成した CSS ファイルは自作プラグインで読み込むようにする。（※後述の追加プラグインを参考）
下記のコードを記述した CSS ファイルを追加（上書き）。
/*--------------------------------------
syntaxhighlighter
---------------------------------------*/
div.syntaxhighlighter
{
margin:0.5em 30px 1em !important;
width: auto !important;
}
スタイルシートへのリンクのタグを追加
ver.2.0.0 になってから XHTML 1.0 に対応してきている。W3C Valid のエラーも出なくなった。
追加プラグインでおこなった ver.1.1.2 の対処を削除する。
また、上記で作成した新規のカスタマイズ用 CSS を読み込むリンクはそのまま。
追加プラグイン
下記の処理を記述したプラグインを追加（上書き）する。
※既存の有効にしてあるプラグインに追加しても問題なし。
function vsd_sublib_init() {
add_action('wp_head', create_function('', 'echo \'<link rel="stylesheet" type="text/css" href="'.plugins_url(basename(dirname(__FILE__))).'/SyntaxHighlighter.css" />\'."\n";'));
}
add_action('init', 'vsd_sublib_init', 1000);
※関数名は適当なものに変えてOK
使い方
整形したいソースコードを [指定言語] ソースコード [/指定言語] でくくる。
例
PHP の場合は ［php］ ソースコード ［/php］ とする。
※かぎ括弧は半角。
指定できる言語
- Bash/shell — bash,shell
- C# — c-sharp, csharp
- C++ — cpp, c
- CSS — css
- Delphi — delphi, pas, pascal
- Groovy — groovy
- Java — java
- JavaScript — js, jscript, javascript
- Perl — perl, pl
- PHP — php
- Plain Text — plain, text
- Python — py, python
- Ruby — rb, ruby, rails, ror
- Scala — scala
- SQL — sql
- VB — vb, vbnet
- XML/HTML — xml, html, xhtml, xslt
※使用できる言語は下記参考
SyntaxHighlighter:Brushes – Alex Gorbatchev
参考
SyntaxHighlighter一部改修メモ – SharpLab.
わくわくプログラミング自習室 Blogs – ［サイト構築中］SyntaxHighlighter解決編
問題点
１行に収まらない場合はスクロールするようになっているが、背景はスクロール前で切れていて見た目があまり美しくない。それほど気にはならないので、気が向いたら対応する。
下記のサイトはスクロールさせても背景が切れずにキレイに表示されている。（※参考まで）
ワードプレスでソースコードを綺麗に見せるプラグインSyntaxHighlighter Plusをインストールする ≫ ワードプレスと物販アフィリエイトで稼ぐサイト作成入門
あわせて読みたい関連記事
- Newer: コメント関連の削除
- Older: リビジョン管理と自動保存の無効化