Crayon Syntax Highlighterに言語を追加してみる

By | Date : 2015/09/04 ( Last Update : 2018/12/15 ) | 178 views

Nia-TN-SDF-A2

こんにちはー!ニアです。

WordPressで記事に載せたソースコードの色分けに、皆さんは何を使っていますか?

このブログでは、WordPressのプラグイン「Crayon Syntax Highlighter」を使って、ソースコードを色分けしています。

対応するプログラミング言語は多めですが、F#やTypeScriptは未対応です(※Ver. 2.7.1の時点)。特にF#はミョウガがよく使っているので・・・。

1. ユーザーフォルダに定義ファイルを置けば、言語を追加できます

Crayon Syntax Highlighterをインストールすると、「[WordPressのルート]\wp-content\plugins」フォルダだけでなく、「[WordPressのルート]\wp-content\uploads」フォルダの中にも「crayon-syntax-highlighter」フォルダが作成されます。

cshup

uploads側のフォルダの中身を見ると、「fonts」と「langs」、「themes」の3つのフォルダが作成されています。

「langs」フォルダはソースコード色分けするための定義ファイルを入れる場所なので、そこにアップロードすれば、ソースコードを色分けするプログラミング言語を追加できます。

2. 試行錯誤で定義ファイルを作り、言語を追加してみる

Crayon Language FilesにあるReadme.mdを読みつつ、今回は

  • F#
  • TypeScript
  • HSP
  • XAML

の4言語の定義ファイルを作成し、「langs」フォルダにアップロードします。

2.1. F#

F#では、「キーワード リファレンス (F#) | MSDN」に載っているキーワードを中心に色が付くようにします。

また文字列ではVerbatim文字列、三連引用符にも対応させます。

2.2. TypeScript

TypeScriptでは、Visual StuioのIntelliSenseに登録されているキーワードを中心に色が付くようにします。

ちなみに、CoffeeScriptは標準で対応しています。

2.3. HSP

HSPでは、HSP付属のエディタの色分けをもとに、標準で定義されているキーワードと、拡張マクロの中でforやswitchなど他の言語でもよく使うものに色が付くようにします。

2.4. XAML

WPFやユニバーサルWindowsアプリで使うXAMLを、デフォルトで用意されているXHTMLで色分けすると、<Style>要素を含んだコードが正しく色分けできない問題があります。

Crayon Syntax HighlighterにはMixed Hilightingという機能があり、XHTMLの中にある<style>(<Style>)要素を検出し、その中をCSSとして色分けすることができます。しかし、XAMLの<Style>要素はただのXMLの要素なので、Mixed Hilighting機能は不要です。

ということでXHTML用の定義ファイルをもとに、<Style>要素をHTMLの<style>要素として認識しないように改造します。

これなら<Style>をたくさん使っても大丈夫です!

3. おわりに

今回作成したF#、TypeScript、HSP、XAMLの定義ファイルは、OneDriveに置いてあります。ぜひ、ダウンロードして使ってみてくださいね。

Down

それでは、See you next!

この記事をシェアする
Chronoir.netのRSSフィードを購読する

About : ニア(Nia)

ゲーム系の開発&運用エンジニア(目指すはフルスタック)。主にC#(Unity)/PHPを使っています。最近はDockerやKubernetes、プライベートではAndroid Wearアプリやモバイルアプリ開発(Xamarin)を探求中。好物は紅茶とコーヒー、シラス丼、趣味は写真撮影と音ゲーです

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください