Apacheライセンスのマークダウンソフトを改造してみた。Citronote　（MarkDownソフト）

Citronote を改造する。

以下webサイトの写真

Apache2.0ライセンスということなので、（改変、再配布可能なライセンス）
プログラムを変更して、自分好みにしていこうと思います。

まず、このソフトは、webサイトのようなかっこいい表示を可能にするソフトです。

見出し用の記号を入力すると、文字が大きくなったりします。

このソフトは珍しく、ほかにTODO、スクラップの文書形式もあります。

Electronで作成され、Vueで書かれています。

tailwind cssで装飾されていました。

今回、主に変更したのは、

• 見出しの表示色、文字の大きさ
• サイドバーの開閉の操作の拡張
• UIの位置変更

です。

見出しの表示色に関しては、

見出しに付与されるclassを特定し、それに対して、cssを充てる必要があります。

エディタ部分と表示部が、一体化されているようなソフトにおいて、これらが結構複雑になる傾向があり、どのクラスをいじればいいのかわからず、少し苦戦しました。

サイドバーの開閉に関しては、

Vueによってコンポーネント化され、tailwindによる、無機質なクラス群を変更するのは結構骨が折れました。

styleの変更のしやすさは大きいですが、
特定可能なクラス名を持っていないと、検索すらできないので、

本職の人は、どのように保守をされているのか気になりました。

もともと、開閉用のボタン自体はあったので、それを参照し、

エディタ部分に追加で同じ処理を追加しました。

テキストが表示されている所を押すと、サイドバーが閉じ、

UIがない状態で、集中して文章を書けるように変更しました。

UIの位置変更については、

サイドバーの編集をした後だったので、スムーズにできました。

ほかのボタンが近いと押し間違いが起きるので、少し間をあけるように変更しました。

削除ボタンが、ファイルのリスト表示から遠かったので、近くにしたりと、

細かい調整をしました。

右が、オリジナル。左が自分が変更したものです。

文字を編集する部分が変わっています。

UIの変更の部分は、間違い探しのようですが、
文章を変更するところの上のアイコンが少し違っていますね。

まとめ

大きな改造というわけではありませんが、

ほかの方が作成したコードを実際に読んで、少しコードを変更し、
自分のやりたい処理を追加してみるということをしてみました。