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

お知らせ

シンタックスハイライトプラグインの切り替えにより、この記事は近日公開を終了します。

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

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

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

#include <stdio.h>
int main( void ){
	printf( "Hello World!\n" );
	return 0;
}

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

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

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

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

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

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

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

• F#
• TypeScript
• HSP
• XAML

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

2.1. F#

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

open System
[<EntryPoint>]
let main argv =
    
    // 現在の日付を取得し、当月1日の曜日と末日を求めます。
    DateTime.Now |> fun now -> ( now.AddDays( float( 1 - now.Day ) ).DayOfWeek |> int, DateTime.DaysInMonth( now.Year, now.Month ) )
    
    // 範囲を[( - 1日の曜日 + 1 )..末日]にし、要素が負の時に空白を、そうでなければ日付を文字列に変換します。
    // こうすることで1日の曜日に合わせてオフセットすることができます。
    // また、要素の位置が7の倍数なら、改行記号も付け足します。
    |> fun( prePad, lastDay ) -> [ for curDay in -prePad + 1..lastDay -> if curDay < 1 then "   " else sprintf ( if ( curDay + prePad ) % 7 = 0 || curDay = lastDay then "%3dn" else "%3d" ) curDay ]
   
    // イテレーターで各要素を出力します。
    |> Seq.iter( fun cal -> printf "%s" cal )

    0

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

// 文字列、Verbatim文字列、三連引用符文字列
let str = "ab\"c"
let verbstr = @"ab\c"
let str2 = """a\"b"c"""

2.2. TypeScript

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

function GetCal() {
    var now = new Date();
    var prePad = new Date(now.getFullYear(), now.getMonth(), 1).getDay();
    var lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate();

    var ans = now.toDateString() + "\n";

    for (var curDay = -prePad + 1; curDay <= lastDay; curDay++) {
        ans += " " + (curDay < 1 ? "  " : (curDay < 10 ? " " : "") + curDay.toString() + (((prePad + curDay) % 7 == 0) ? "\n" : ""));
    }

    return ans;
}

var cal = GetCal();

console.log(cal);

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

2.3. HSP

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

#packopt name "Sample"

#module TestMod

#defcfunc local Sum int a, int b
	if a < 0 || b < 0 || a > b : return -1
	sum = 0
	repeat b - a + 1, a
		sum += cnt
	loop
	return sum
	
#defcfunc local SumArray array a
	switch vartype( a )
	case 2 : sum = "" : swbreak		; 文字列の場合、各要素の文字列を結合します
	case 3 : sum = 0.0 : swbreak
	case 4 : sum = 0 : swbreak
	swend
	
	foreach a
		sum += a( cnt )
	loop
	
	return sum

#global

	screen 0, 320, 160
	title "総和を求めるプログラム"
	a = 0 : b = 0
	pos 20, 30 : mes "Sum ("
	pos 70, 30 : input a, 50, 23
	pos 125, 30 : mes "to"
	pos 150, 30 : input b, 50, 23
	pos 210, 30 : mes ")"
	pos 230, 30 : button "計算", *calc
	
	wait 0
	stop

// 計算
*calc
	; aとbのは正の数かつ、a <= b を満たす必要があります。
	if a < 0 || b < 0 || a > b {
		dialog "正しくない値が入力されています", 1, "エラー"
	}
	else {
		; 総和の計算
		dialog strf( "%d から %d までの総和は %d です。", a, b, Sum@TestMod( a, b ) ), 0, "計算結果"
	}
	
	stop

2.4. XAML

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

<Window x:Class="WPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="{Binding DisplayDate, ElementName=cal, StringFormat=\{0:d\}, ConverterCulture=ja-jp}"
	Height="207" Width="200" ResizeMode="NoResize">
    <Window.Resources>
        <Style x:Key="Calstyle" TargetType="{x:Type Calendar}">
			<Setter Property="Background" Value="Azure"/>
        </Style>
    </Window.Resources>
	<Calendar x:Name="cal" Style="{StaticResource Calstyle}"/>
</Window>

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

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

<Window x:Class="WPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="{Binding DisplayDate, ElementName=cal, StringFormat=\{0:d\}, ConverterCulture=ja-jp}"
	Height="207" Width="200" ResizeMode="NoResize">
    <Window.Resources>
        <Style x:Key="Calstyle" TargetType="{x:Type Calendar}">
			<Setter Property="Background" Value="Azure"/>
        </Style>
    </Window.Resources>
	<Calendar x:Name="cal" Style="{StaticResource Calstyle}"/>
</Window>

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

3. おわりに

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

それでは、See you next!