非IT企業に勤める中年サラリーマンのIT日記

非IT企業でしかもITとは全く関係ない部署にいる中年エンジニア。唯一の趣味がプログラミングという”自称”プログラマー。

Electron+ACE+Highlight.jsでブログ掲載用のソースコードハイライターを作った

      2016/06/14

[ad#top-1]

プログラミング系ブログを書いているので、ソースコードをどれだけきれいに掲載するか、という点に結構気を使います。

そのため、以前、C#でソースコードをブログに貼るためのソースコードハイライターアプリを自作しました。

HTML Converter for C# の使い方

 

これはこれで、うまくできたのですが、問題は、ソースコードのキーワードを見つけて色付けするところが非常に作業工数を要し、結局C#の解析だけで力尽きて終わってしまいました。JavaやJavaScript,、PHP、HTMLくらいは最低限サポートしたいところですが、何せプログラミングが大変で、C#で力尽いた次第です。

その後、JavaScriptでデスクトップアプリが作れるElectronと出会い、ちまたにある豊富なJavaScriptライブラリがすべて使えるということを知り、Electronで作り直そうと思い至ったのです。要は挫折した各プログラミングコードのキーワード解析+色付けは、ライブラリを使って自動でやって、あとはそれ以外の部分だけ作ればOKってことです。

で、作ったのがこれです。(まだ細かいところで未完成なので公開はしていません。)

1

 

こいつでハイライトしたものは、最後に掲載しています。

見えているところは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, 自作アプリ紹介