Typora にカスタム CSS を設定する

Typora は HTML+CSS の Web ベースの技術スタックで作られてます。なので、CSS を少し扱える知識があれば、細かなところにも簡単に変更が出来ます。

やりたいこと

• Typora にオレオレ CSS を当てる。

カスタムCSSを設定していく

tl;dr

# 1) このファイルを作成＋好きなCSSを書き込む
vim ~/<TyporaのApplicationのPath>/themes/base.user.css

# 2) TyporaをrestartしてCSSを読み込ませる

やりたいことはこの２ステップです。
細かく見ていきます。

<TyporaのApplicationのPath>/themesを探す

下記で場所がわかる。

Typora > Preferences > Appearence > Open Theme Folder

base.user.cssについて

下記の順番でCSS が読み込まれます。

• １）Typora 標準の CSS
• ２）現在のテーマの CSS
• ３）base.user.cssの CSS
• ４）{current-theme}.user.cssの CSS

また、使い分けとして下記のような感じです。

• １）、２）は、基本的に修正禁止
• ３）は、すべてのテーマに反映
• ４）は、テーマ単位に反映

今回の記事では汎用的かつわかりやすいように、３）を使って CSS をカスタマイズします。

ユースケースによっては４）で行うべきケースもありますが、初めてなら３）から始めても良いかと思います。

その他：CSSを当てるためのClass名はデバッグモードから探す

CSSを書くにあたり「どこの要素がなにのClassを持っているか？」を知る必要があります。

Web開発で使うDevTool をTypora 上でも動かせるので、これで確認します。

デバッグモードは下記で表示されるようになります。

• １）Help > Enable Debugging
• ２）右クリック ＞ Inspect Element

これで、必要な要素をクリックしたり、Elementを探していきます。

おわりに

だいたい公式ドキュメントを読めばわかるけど、このメモでもう少し楽になるはず。

REF

• Add Custom CSS