HTMLとCSSしか分からんけどElectronでMarkdownエディタを作った

うそ、HTMLとCSSもあんまり分かってない。
何で作ってんの？一回作ったら諦めつくから…たぶん
(っΦωΦ)(ΦωΦ˘)

この話、「ハイライト、見出しで折り畳み、アウトライン解析が揃ってるリッチテキストエディタじゃないMarkdownエディタが欲しいけど無い」というところから始まっていまして*1
要するに素のテキストファイルが出力されて欲しいのね。
あと既存のMarkdownエディタではだいたい折り畳みがついてないんですよね
Typoraなんかもそう
あとTyporaはやたら改行が入るのが嫌…でも普通のMarkdownエディタは文末に半角スペース2つ入れないと改行されないのも嫌（わがまま）
VScodeが一番条件に近いのだけど、起動時間にちょっと不満があるしただのテキストエディタとして使うには大げさすぎる…

huzisato.hateblo.jp
んで前回ブラウザで動くものを作って、既存のパーツの組み合わせでそれっぽいものができることが分かったので、同じようなものをElectronで動くように作ろうというわけ。
学習用に配布されている以下を参考にしました。というかベースはほとんどこれです
ics.media

これを魔改造する
いろいろサンプルを見るとみんなUIフレームワークとかいうのを使ってるらしいのですが、Vue？React？それってこの程度のものに必要なの？？？見た目変えたいならCSS当てれば良くない？となったので使ってません。よくわかんないし。
Tailwind CSS？知らん…なにそれ…

できたもの

youtu.be
うーん手作り感。
起動めっちゃおそーい(っΦωΦ)(ΦωΦ˘)なんで？
アイコン変えてそれっぽくしようと思ったんだけど、どうしても設定できなくて諦め
でもちゃんと起動はする

使ったもの

• Font Awesome(free) アイコン
• Ace (エディタ）
• Marked (Markdownパーサ）
• milligram(CSS framework)

相変わらず「HtmlとCSSだけﾁｮｯﾄﾜｶﾙ」の状態なので、ほとんど探してきたもののコピペで
プレビューと設定の窓が干渉しないように出し方を変えたのはいいんだけど、そしたらスクロールバーが一番上に表示されるようになってしまい
でもこれ自力じゃ直せないからそのまま…　そ、操作はいちおうできるし…

Aceが優秀なので何もしなくても

• ハイライト
• コードの折り畳み
• 入力補完

などがつく。
しかし等倍フォントしか対応してない
仕方ないので日本語対応の等倍フォントを探してきた（biz UDGothic）
けど、だいぶ自由度が低いし、三連の「…」とか使うと表示崩れるんだよね
いやこれはもうAce以外のエディタ使えよになってしまうんですが　Monacoとか
Ace以外の組み込み方がよくわからなかったんです　残念でした。

うーん、一回作ると色々不満出ますね。
やっぱリアルタイムプレビュー要らないんじゃ？とか。テーマ変えられるようにしたいよなとか。

ソースコード

markdown-editor/Ace_Nammark at main · nujisato/markdown-editor · GitHub
Githubに置いてあるので煮るなり焼くなり好きにしてください
あとこの路線のMarkdownエディタを作った人は配布してください　欲しいので
起動が軽いといいな…

結論

素人が自作するよりプログラミング分かる人が作ってくれたのを使ったほうがよい（当たり前）
しかし誰かが作ってくれたやつはだいたい欲しい機能がどれか一つ足りない
Meryかサクラエディタにコードブロック折り畳みがついてくれれば、もうそれでいいんですけど

プラグインでプレビューもできちゃってるしね

www.haijin-boys.com

*1:リアルタイムプレビュー機能はそんなに重要ではない