Typoraの標準CSS（base.css）を入手する

はじめに

普段からMarkdownエディタとしてTyporaを使用しています。Typoraでは簡単にテーマを作成できるため、自分好みのデザインにカスタマイズしたり、既存のテーマの気になる部分を編集したりできます。

通常は既存のテーマファイルを編集するだけで十分ですが、大きなデザイン変更をしたい場合は、基盤となるスタイルファイルを参考にしながら調整したりHTMLを見ながら変更をしていきます。

本記事では、Typoraでデベロッパーツールを使用する方法とbase.cssを入手する方法について説明します。

対象読者

• Typoraでデベロッパーツールを使用する方法について知りたい人
• base.cssを入手する方法について知りたい人
• MacOSを使っている人
• （Windows/Linuxは View > Toggle DevToolsからデベロッパーツールを使えるようですが確認はできてません）

Typoraの特徴

• 軽量でシンプルなUI
• Markdownのリアルタイムプレビューに対応
• PDFやHTMLなど多彩なエクスポートが可能
• テーマやショートカットを自由にカスタマイズ
• フォルダ管理ができ、ファイル操作がスムーズ
• 数式・表・コードブロックに対応

手順

早速手順について説明していきます。

Safariでデベロッパーツールを使えるようにする

既に設定済みの方は飛ばしてください。

1. Safariの設定に移動する
   
2. 詳細タブから「Webデベロッパ用の機能を表示」をONにする
   

Typoraでデベロッパーツールを開く

1. Typoraを起動する
2. Typoraを起動した状態でSafariを起動し、開発タブから以下のようにクリックする
   
3. デベロッパーツールが開いたら「ソース」タブをクリックして、左側のファイルツリーからbase.cssを選択する
   
   これでbase.cssの確認ができました。

おわりに

本記事は以上となりますが、現在Notion風のテーマファイルを作成しているので近々公開できたらなと思います。色々なテーマを使う中で感じていた（個人的な）使いにくさを改善しているので、誰かに使ってもらえると嬉しいです（まだ公開してませんが）。

参考文献

https://support.typora.io/Debug-Themes/