MarkNode の Markdown プレビューペインは、さまざまなテーマでスタイルを設定できます。組み込みの外観を選ぶか、プレビューをアプリケーションテーマに自動的に追従させるか、あるいは独自の CSS を記述して、ドキュメントを公開する場所に合わせることができます。
アプリケーションテーマに追従する
デフォルトでは、プレビューは アプリのテーマに合わせる に設定されています。これは現在のアプリケーションテーマと対になる組み込みスタイルを使用するため、Paper から Midnight(あるいは他のいずれかのテーマ)に切り替えると、ワンアクションでプレビューの配色もそれに合わせて変わります。アプリの他の部分と異なる外観にしたい場合を除き、プレビューテーマを選ぶ必要はまったくありません。
組み込みテーマ
MarkNode には、すべてのユーザーが利用できる組み込みプレビューテーマ一式が同梱されています。これらは読み取り専用で変更できませんが、カスタムテーマの出発点としていつでもコピーできます。各アプリケーションテーマ(Paper、Midnight、Sepia、Nord、Solarized Dark、High Contrast)と対になるスタイルに加えて、次のような公開先や雰囲気に特化した外観も用意されています。
- GitHub Light と GitHub Dark — ドキュメント向けの GitHub スタイルのレンダリング
- Solarized Light と Solarized Dark — Solarized のパレット
- Serif — 長文の散文向けの中央寄せセリフカラム
- Compact — 情報密度の高いリファレンス資料向けの、より詰まったレイアウト
- Academic、Newsprint、Dracula など
組み込みテーマは、背景・テキスト・リンク・境界線のベースカラーを有効なアプリケーションテーマから引き継ぐため、何も選び直さなくてもライトとダークの両方で適切に表示されます。(アプリのテーマに合わせる の土台となる内部的な Default スタイルもありますが、メニューでは Default を直接選ぶのではなく アプリのテーマに合わせる を選択します。)
テーマを切り替えるには、プレビューペインのヘッダーにある プレビュースタイル ボタンをクリックするか、プレビュー内を右クリックしてスタイル一覧を使用します。再びアプリケーションテーマに追従させるには アプリのテーマに合わせる を、固定したい場合は任意のスタイルを選択してください。変更はすべてのプレビュー画面(エディタ横のドッキングされたプレビューと、ドッキング解除したプレビューウィンドウ)に即座に適用され、セッションをまたいで保持されます。
カスタムテーマの作成
プレビュースタイルメニューから このスタイルから新規作成… を選ぶと、現在有効なテーマをベースにしたカスタムテーマを作成できます。
- 新しいテーマの名前を入力します。組み込みテーマと同じ名前は使用できません。
- ソース CSS があらかじめ入力された状態で CSS エディタが開きます。好みに合わせて編集してください。
入力するそばからプレビューがライブで再描画されます。CSS は保存するまでメモリ上に保持されるため、自由に試せます。取りやめたい場合は、エディタを閉じれば編集内容は破棄されます。
すでに作成済みのカスタムテーマを編集するには、そのテーマを選択し、同じメニューから 現在のスタイルを編集… を選びます。
保存と共有
カスタムテーマを保存すると、グローバルなテーマライブラリに格納されるため、このマシン上のすべてのプロジェクトで利用できます。また、現在のプロジェクトにコピーを保存 にチェックを入れると、テーマがプロジェクト内に書き込まれ、テーマがプロジェクトと一緒に持ち運ばれます。プロジェクトを Git に登録しておけば、リポジトリをクローンしたすべての共同作業者に同じプレビューが表示されます。
まだ持っていないカスタムプレビューテーマを含むプロジェクトを開くと、そのプロジェクトを開いている間だけ、そのテーマがスタイル一覧に表示されます。
カスタム CSS でスタイル設定できる範囲
カスタム CSS はプレビューコンテナ(.markdown-preview)にスコープが限定されているため、エディタやサイドバー、MarkNode のその他の部分には影響しません。設定できるのは次のとおりです。
- 本文のフォントとサイズ
- 見出し、リスト、引用、表
- コードブロック、インラインコード、シンタックスハイライトの配色
- 余白、パディング、コンテンツの最大幅
カスタムテーマを組み込みテーマと同じようにライトとダークへ自動で適応させたい場合は、組み込みテーマを複製するところから始めてください。複製したものはテーマ対応のベースを引き継ぐので、そこから調整できます。
CSS は視覚的な表現のみを調整し、基盤となる HTML は変更しないため、大掛かりな DOM の再構成はできません。
カスタムテーマの削除
カスタムテーマを選択し、スタイルメニューの削除アクションを使用します。最初に確認ダイアログが表示されます。削除したテーマが有効なテーマだった場合、MarkNode はデフォルトの組み込みテーマにフォールバックします。組み込みテーマには削除アクションがなく、削除できません。