Electron+ACE+Highlight.jsでブログ掲載用のソースコードハイライターを作った
[ad#top-1]
プログラミング系ブログを書いているので、ソースコードをどれだけきれいに掲載するか、という点に結構気を使います。
そのため、以前、C#でソースコードをブログに貼るためのソースコードハイライターアプリを自作しました。
HTML Converter for C# の使い方
これはこれで、うまくできたのですが、問題は、ソースコードのキーワードを見つけて色付けするところが非常に作業工数を要し、結局C#の解析だけで力尽きて終わってしまいました。JavaやJavaScript,、PHP、HTMLくらいは最低限サポートしたいところですが、何せプログラミングが大変で、C#で力尽いた次第です。
その後、JavaScriptでデスクトップアプリが作れるElectronと出会い、ちまたにある豊富なJavaScriptライブラリがすべて使えるということを知り、Electronで作り直そうと思い至ったのです。要は挫折した各プログラミングコードのキーワード解析＋色付けは、ライブラリを使って自動でやって、あとはそれ以外の部分だけ作ればOKってことです。
で、作ったのがこれです。（まだ細かいところで未完成なので公開はしていません。）
こいつでハイライトしたものは、最後に掲載しています。
見えているところはACEで実装していますが、これはあくまでエディタとしての役割のみ。ACEからHTMLを抜くことができなかったので、裏にHighlight.jsが隠れていて、[GET]ボタンを押すとソースコードがそちらに転送されて再ハイライトした後にHTMLを抜いています。（もちろんブログ掲載用に整形しています。）
例はC#ですが、ほぼ有名どころの言語はすべてサポートできています。
もっとも、ブログにソースコードを貼る場合は、こんなアプリを使うことなく、ブログにHighlight.jsを実装すれば可能です。が、細かいところでカスタマイズしたかったので、こんなものを作りました。
using System;
using System.Drawing;
using System.Windows.Forms;
class MainWindow{
[STAThread]
static void Main(){
Application.Run(new myForm());
}
}
class myForm : Form{
public myForm(){
this.StartPosition = FormStartPosition.CenterScreen;
//this.ShowInTaskbar = false; //タスクバーに配置しない
this.Width = 400;
this.Height = 250;
this.Text = “Title”;
this.setComponents();
}
//ボタンを押したときのイベント
private void button1_Click(object sender, EventArgs e){
//Application.Exit(); //アプリの終了
this.Close(); //フォーム閉じる。メインフォームならアプリ終了
}
//テキストボックスでキーが押されたとき
private void keyDowned(object sender, KeyEventArgs e){
//Ctrl+Zキー
if(e.KeyCode == Keys.Z && e.Control){}
//Enterキー
if(e.KeyCode == Keys.Enter){}
//Tabキー
if(e.KeyCode == Keys.Tab){}
}
private void setComponents(){
Font font = new Font(“Meiryo UI”, 10);
new Label(){
Font = font,
Location = new Point(50, 50),
Text = “ラベル”,
AutoSize = true,
Parent = this,
};
TextBox textBox1 = new TextBox(){
Font = font,
Location = new Point(150, 50),
Size = new Size(170, 30),
//PasswordChar = ‘*’, //パスワード入力にする場合
//Multiline = true, //多数行タイプ
//BorderStyle = BorderStyle.FixedSingle, //シングル枠
//Dock = DockStyle.Fill, //画面目一杯に配置
Parent = this,
};
textBox1.KeyDown += new KeyEventHandler(keyDowned);
Button button1 = new Button(){
Font = font,
Text = “ボタン”,
Size = new Size(100, 30),
Location = new Point(50, 100),
Parent = this,
};
button1.Click += new EventHandler(this.button1_Click);
}
}
[ad#ad-1]
-
Electron, 自作アプリ紹介