なんだかシリーズ化しているが、たぶん最終回…だと思う。
ローカルストレージに保存できるちょっとしたメモツールを作りました。よくあるやつ。
思ったより簡単にできるんだな…という感想
CodemirrorはCDNから引っ張ってきているので、webに繋がっていればhtmlファイル1つで動く
メモはローカルのどこかに保存されるのでオンライン上にデータは上げません。5MB分くらい保存できるらしいです。
json形式らしいのだが、どこなのかはよく分からん…ので、消せなくなると大変だなと思って全部消去ボタンを作っておきました。
空のメモを保存すると削除ボタンが効かなくなるという現象を経て学習した。
何も分からんなりにAce、Monaco、CodeMirrorといじってきたが
- Ace：シンプル コード1行書くだけで検索機能も折り畳みも入力補完も全部入ってて楽
- Monaco：デフォでミニマップとかついてて高機能っぽい気がするけど、Markdownの折り畳みや入力補完は自分で追加しないといけない 中身は同じなんだから大人しくVScode使えばよいのでは？
- CodeMirror：装飾や拡張が簡単 公式アドオンが色々あるけど検索やなんかのちょっとした機能まで全部リンク指定しないといけない。js呼びさえすれば何もしなくても機能が使える
って感じだった。
Monacoはなんもわからんが、CodeMirrorは公式のデモが機能別にページ分けされててソース覗いてコピペするだけで追加したい機能が動くからありがてえなあと思った
そうしてできたのがこのサンプルってわけ
(っΦωΦ)(ΦωΦ )
nujisato.github.io
ところでTyporaやObsidianはCodeMirror+Electronでできてるらしい
つまりエディタ内で文字に装飾をつけることが可能なはずよな…？
と思って調べたら意外に簡単にできた。
libs/codemirror.cssを見るとclass名が分かる
CDNだとこのファイル
https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.css
cm-header、outline-level-1～6を指定して自前のcssで上書きするだけでH1～H6のスタイル変更できる
