📔

メモアプリ Joplin の編集画面の見栄えを良くしてみる

2022/04/22に公開

まずは、Joplin の紹介から

メモアプリ Joplin の特徴をサクッと述べると、

と大体こんな感じです。
他にも個人的には、OneNote、Typora なども使ったりはしていますが、Joplin が一番お気に入りです。

で、使い始めて1年以上経つのですが、ふとある事に気付きました。

編集画面がイケてない…

Joplin は、編集画面とプレビュー画面は、基本別々に分かれています。（中間っぽいモードもあるが、やや微妙）

で、編集画面で書いたコードをプレビュー画面で見てたりして、「何か面倒…」と感じたりしました。（「テーマ」を変更することで全体の見栄えを変えたりできますが、かなり微妙）

実は、使い始めた頃からプレビュー画面は、オリジナルの CSS を適用させて、見栄えを良くしていたのですが、この度、編集画面もオリジナルの CSS を適用させて、見栄えをそれなりに整えることができました。

以下、Before と After 画像です。左が編集画面。右がプレビュー画面です。

やり方は、「ツール」→「オプション」→「スタイル」→「詳細設定を表示」で、「カスタムスタイルシート (Markdownビューアー)」が、プレビュー画面用のCSS、「カスタムスタイルシート (アプリ全般の外観調整用)」で、編集画面に対してCSSを適用させることができます。

また、「ヘルプ」→「開発者ツールのオンオフを切り換える」で、デベロッパーツールが出てきますので、それで適用させたい箇所の CSS クラスなどを調べる事ができます。

CSSを編集後は、Joplinを終了させて（バックグラウンドからも終了させる）、再度開けば、CSS が適用されます。

少し憎いのが、プレビュー画面のコード部分は、highlightjs というライブラリが使われていて、編集画面のコード部分の表示は、codemirror というライブラリが使われています。
本家：highlightjs
本家：codemirror
本家：codemirror theme

私が書いている CSS は、まだ発展途上で、かなり未整理で汚くて、本当はお見せできないレベルですが、とは言え、「そんな事言ってないで、見せちゃいなよ」という声も聞こえてきそうですので、コッソリ、こちらで公開させていただきます。（あまり参考にしないで下さい）

現在ある問題点としては、ヘッダーを display:block にすると、日本語入力オンの状態で入力しようとする時、その入力中（未確定状態の時）、行が分かれて表示されてしまう事です。

解決策は不明です。（誰か分かった方、コメント下さい）

これで更に Joplin が好きになりました。なんか少しできる人になった気がします。😅
ちなみにアウトラインの表示は、プラグイン画面で「outline」で検索すると出てきます。