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を探していきます。
おわりに
だいたい公式ドキュメントを読めばわかるけど、このメモでもう少し楽になるはず。
