ソースコードを埋め込む方法2～HSPのコードをWordPress上で表示～
gistの欠点
前回の記事ではソースコードの埋め込みはしばらくgistでと書きました。
しかし、一つ問題が発生
HSPに非対応です。
HSPとは何ぞやという人はHot Soup Prosessorでググってみてください。
初心者向け言語のため、ほかの言語でプログラミングをしている人は逆に知らないかもしれません。
国内ならともかく、国外では知名度はかなり低い気がしますし、ニッチな需要なのでHSPのシンタックスに標準で対応しているハイライターは少ないです。(というか見つけられていない)
ましてや、Wordpress上で表示となるとハードルは割と高いのかもしれません。
SyntaxHighlighter Evolved
Webページ上でソースコードを表示するのにSyntaxHighligterというものがあることを知りました。
しかも、WordpressのプラグインとしてSyntaxHighlighter Evolvedなるものがあるそうで、早速インストール。
もちろん、JavaやPHP等はインストールするだけで使えます。
今回はHSPに対応させなくてはならないため、SyntaxHighlighter Evolvedに言語を追加する作業が必要です。
SyntaxHighlighter Evolvedに言語を追加
SyntaxHighlighter Evolvedに言語を追加するためには言語定義ファイルが必要になります。
必要な言語の定義ファイルが無ければ自分で書く必要がありますが、幸いにもHSP用の定義ファイルを書いてくださった方がいました。
こちらの内容をコピーして、テキストエディタに貼り付け、”shBrushHsp.js” として保存してください。
その後、このファイルを “wp-content/plugins/syntaxhighlighter/third-party-brushes” にアップロードします。
これだけではまだ追加できていません。
設定を書き込む必要があります。
/syntaxhighlighter.php の編集
“wp-content/plugins/syntaxhighlighter/syntaxhighlighter.php”
を編集します。
“Register some popular third-party brushes” で検索をかけるとヒットすると思うので、その中の最後に以下の例にならってHSP用の設定を追記してください。
// Register some popular third-party brushes
wp_register_script( 'syntaxhighlighter-brush-clojure', plugins_url( 'third-party-brushes/shBrushClojure.js', __FILE__ ), array('syntaxhighlighter-core'), '20090602' );
wp_register_script( 'syntaxhighlighter-brush-fsharp', plugins_url( 'third-party-brushes/shBrushFSharp.js', __FILE__ ), array('syntaxhighlighter-core'), '20091003' );
wp_register_script( 'syntaxhighlighter-brush-latex', plugins_url( 'third-party-brushes/shBrushLatex.js', __FILE__ ), array('syntaxhighlighter-core'), '20090613' );
wp_register_script( 'syntaxhighlighter-brush-matlabkey', plugins_url( 'third-party-brushes/shBrushMatlabKey.js', __FILE__ ), array('syntaxhighlighter-core'), '20091209' );
wp_register_script( 'syntaxhighlighter-brush-objc', plugins_url( 'third-party-brushes/shBrushObjC.js', __FILE__ ), array('syntaxhighlighter-core'), '20091207' );
wp_register_script( 'syntaxhighlighter-brush-r', plugins_url( 'third-party-brushes/shBrushR.js', __FILE__ ), array('syntaxhighlighter-core'), '20100919' );
wp_register_script( 'syntaxhighlighter-brush-hsp', plugins_url( 'third-party-brushes/shBrushHsp.js', __FILE__ ), array('syntaxhighlighter-core'), '20190430' );
最終行以外はもともと書かれているはずです。
日付の部分はよくわからなかったので、編集日を入れておきました。
次に、その下の部分にも追記します。
'vbnet' => 'vb', 'xml' => 'xml', 'xhtml' => 'xml', 'xslt' => 'xml', 'html' => 'xml', 'hsp' => 'hsp',
こちらも最終行以外はあらかじめ書かれていると思います。
これで設定は完了です。
あとは
［hsp]HSPのソースコード[/hsp］
のように書いてあげれば自動的に成形されます。
ものすごく適当ですがサンプル
a = "hello"
mes "a"
if (a = "hello") {
goto *label
}
stop
*label
mes "aはhelloです。"
stop
言語定義ファイルを提供してくださったwoodrootsさんに感謝です。