こんにちはー！ニアです。
WordPressで記事に載せたソースコードの色分けに、皆さんは何を使っていますか？
このブログでは、WordPressのプラグイン「Crayon Syntax Highlighter」を使って、ソースコードを色分けしています。
|
1 2 3 4 5 |
#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」に載っているキーワードを中心に色が付くようにします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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文字列、三連引用符にも対応させます。
|
1 2 3 4 |
// 文字列、Verbatim文字列、三連引用符文字列 let str = "ab\"c" let verbstr = @"ab\c" let str2 = """a\"b"c""" |
2.2. TypeScript
TypeScriptでは、Visual StuioのIntelliSenseに登録されているキーワードを中心に色が付くようにします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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など他の言語でもよく使うものに色が付くようにします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
#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>要素を含んだコードが正しく色分けできない問題があります。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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>要素として認識しないように改造します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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!