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

By | Date : 2015/09/04 ( Last Update : 2016/05/24 ) | 109 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)

紅茶とコーヒーが好きな湘南生まれのプログラマー/ITエンジニアです。主にC#/C++/PHPを使ってプログラミングをしています。趣味は写真撮影と音ゲーです。時々イラストを描いています。プログラミングを勉強している方々と仲良くなりたいです! 興味を持っている分野:UWP/Xamarin/Android Wear/WPF/Windows/Visual Studio/WordPress/KUSANAGI/nginx

コメントを残す

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

*