Solarized とは各種ターミナルやエディタに使える目に優しいカラースキームです。なかでも vim 用のものは .vimrc を解析してみたサイトで圧倒的人気で 1 位を獲得するなど、利用者が多いことで知られています。
このカラースキームの設定方法は以前記事にもまとめました。
最強カラースキームと言えば Solarized だよね！ | blog.delphinus.dev
https://blog.delphinus.dev/2012/10/let-us-use-solarized.html
今回はこれを Syntaxhighlighter や Gist で実現してみました。スタイルシート書いただけですけどね。
もう時もたって各所で解説されているので改めて書く必要もないかもしれませんが、詰まった点もあったのでまとめてみます。
このアドオンを使うと、こんな感じで iPhone でも見やすいページが作れます。
| 文字 | 実体参照 |
|---|---|
| < | < |
| & | & |
SyntaxHighlighter による記述に <pre> タグを使うといろいろと不便な点がある。一番の問題は、<pre> 内では左表に示す文字を直接書き表わせないことだ。
【Javascript】SyntaxHighlighter 3.0 の新機能と注意点
https://blog.delphinus.dev/2010/07/new-function-of-syntaxhighlighter-3.html
SyntaxHighlighter を Movable Type で使うプラグインには次のものがある。
SyntaxHighlighter
http://alexgorbatchev.com/SyntaxHighlighter/
SyntaxHighlighter for Movable Type | kwrogu
http://blogspot.makotokw.com/portfolio/movabletype/syntaxhighlighter/
SyntaxHighlighter for Movable Type « kwLog
http://blog.makotokw.com/portfolio/movabletype/syntaxhighlighter/
これは SyntaxHighlighter 2.x にしか対応していないのだが、最新版の 3.0.83 で無理矢理動かしてみた。
ブログ等でコードをさらすときに必携のスクリプト“SyntaxHighlighter”がメジャーバージョンアップして 3.0 になっていた。2.0 系、2.1 系よりアップデートするときの新機能と注意点について書いてみる。
SyntaxHighlighter
http://alexgorbatchev.com/SyntaxHighlighter/
新機能について
http://alexgorbatchev.com/SyntaxHighlighter/whatsnew.html
当然と言えば当然だが、TT2 のとき（その１、その２）よりは遙かに楽だった。
# サンプル
arg1: value1
arg2:
- [ value2, value3 ]
- arg3:
- value4
修正・作成するファイルは2つ。
ファイル名
/mt/plugins/SyntaxHighlighter/lib/SyntaxHighlighter/Plugin.pm
'html'=>'shBrushXml',
'xhtml'=>'shBrushXml',
'tt' => 'shBrushTT2',
'tt2' => 'shBrushTT2',
# 前回の修正の直後に書き加える
'yml' => 'shBrushYAML',
'yaml' => 'shBrushYAML',
);
ファイル名
/mt-static/plugins/SyntaxHighlighter/2.0/scripts/shBrushYAML.js
/* こっちは新たに作成する
かなり大雑把だけど、一応の役には立つよね */
SyntaxHighlighter.brushes.YAML = function() {
this.regexList = [
{ regex: /#.*$/gm, css: 'comments' }
,{ regex: /\w+:/g, css: 'keyword' }
,{ regex: /[^#:]+$/gm, css: 'string' }
,{ regex: SyntaxHighlighter.regexLib.doubleQuotedString
,css: 'string' }
,{ regex: SyntaxHighlighter.regexLib.singleQuotedString
,css: 'string' }
];
};
SyntaxHighlighter.brushes.YAML.prototype
= new SyntaxHighlighter.Highlighter();
SyntaxHighlighter.brushes.YAML.aliases
= ['yml', 'yaml'];
最後にMTのHTMLヘッダーテンプレートを書き換えて完了だ。
<$mt:SyntaxHighlighterInclude brush="html,perl,jscript,bash,tt2,plain,sql,yaml" theme="default"$>
前回の状態ではTT2構文のハイライトはうまくいくものの、本来の用途である、HTML中に埋め込んだ状態ではそれが反映されなかった。それは今回使用したプラグインにおける以下の仕様のためだ。
SyntaxHighlighter for Movable Type « kwLog
- SyntaxHighlighterのconfigurationには対応していません
よってプラグインの構文を無理矢理拡張して対応。さらにカラフルになった。
#!/usr/bin/perl
use utf8;
use strict;
use warnings;
use errors;
my $word = shift;
if ( $word =~ /orz/ ) {
die "ズコー";
}