プレビューテーマ

MarkNode の Markdown プレビューペインは、さまざまなテーマでスタイルを設定できます。組み込みの外観を選ぶか、プレビューをアプリケーションテーマに自動的に追従させるか、あるいは独自の CSS を記述して、ドキュメントを公開する場所に合わせることができます。

アプリケーションテーマに追従する

デフォルトでは、プレビューは アプリのテーマに合わせる に設定されています。これは現在のアプリケーションテーマと対になる組み込みスタイルを使用するため、Paper から Midnight(あるいは他のいずれかのテーマ)に切り替えると、ワンアクションでプレビューの配色もそれに合わせて変わります。アプリの他の部分と異なる外観にしたい場合を除き、プレビューテーマを選ぶ必要はまったくありません。

組み込みテーマ

MarkNode には、すべてのユーザーが利用できる組み込みプレビューテーマ一式が同梱されています。これらは読み取り専用で変更できませんが、カスタムテーマの出発点としていつでもコピーできます。各アプリケーションテーマ(Paper、Midnight、Sepia、Nord、Solarized Dark、High Contrast)と対になるスタイルに加えて、次のような公開先や雰囲気に特化した外観も用意されています。

  • GitHub LightGitHub Dark — ドキュメント向けの GitHub スタイルのレンダリング
  • Solarized LightSolarized Dark — Solarized のパレット
  • Serif — 長文の散文向けの中央寄せセリフカラム
  • Compact — 情報密度の高いリファレンス資料向けの、より詰まったレイアウト
  • AcademicNewsprintDracula など

組み込みテーマは、背景・テキスト・リンク・境界線のベースカラーを有効なアプリケーションテーマから引き継ぐため、何も選び直さなくてもライトとダークの両方で適切に表示されます。(アプリのテーマに合わせる の土台となる内部的な Default スタイルもありますが、メニューでは Default を直接選ぶのではなく アプリのテーマに合わせる を選択します。)

テーマを切り替えるには、プレビューペインのヘッダーにある プレビュースタイル ボタンをクリックするか、プレビュー内を右クリックしてスタイル一覧を使用します。再びアプリケーションテーマに追従させるには アプリのテーマに合わせる を、固定したい場合は任意のスタイルを選択してください。変更はすべてのプレビュー画面(エディタ横のドッキングされたプレビューと、ドッキング解除したプレビューウィンドウ)に即座に適用され、セッションをまたいで保持されます。

カスタムテーマの作成

プレビュースタイルメニューから このスタイルから新規作成… を選ぶと、現在有効なテーマをベースにしたカスタムテーマを作成できます。

  1. 新しいテーマの名前を入力します。組み込みテーマと同じ名前は使用できません。
  2. ソース CSS があらかじめ入力された状態で CSS エディタが開きます。好みに合わせて編集してください。

入力するそばからプレビューがライブで再描画されます。CSS は保存するまでメモリ上に保持されるため、自由に試せます。取りやめたい場合は、エディタを閉じれば編集内容は破棄されます。

すでに作成済みのカスタムテーマを編集するには、そのテーマを選択し、同じメニューから 現在のスタイルを編集… を選びます。

保存と共有

カスタムテーマを保存すると、グローバルなテーマライブラリに格納されるため、このマシン上のすべてのプロジェクトで利用できます。また、現在のプロジェクトにコピーを保存 にチェックを入れると、テーマがプロジェクト内に書き込まれ、テーマがプロジェクトと一緒に持ち運ばれます。プロジェクトを Git に登録しておけば、リポジトリをクローンしたすべての共同作業者に同じプレビューが表示されます。

まだ持っていないカスタムプレビューテーマを含むプロジェクトを開くと、そのプロジェクトを開いている間だけ、そのテーマがスタイル一覧に表示されます。

カスタム CSS でスタイル設定できる範囲

カスタム CSS はプレビューコンテナ(.markdown-preview)にスコープが限定されているため、エディタやサイドバー、MarkNode のその他の部分には影響しません。設定できるのは次のとおりです。

  • 本文のフォントとサイズ
  • 見出し、リスト、引用、表
  • コードブロック、インラインコード、シンタックスハイライトの配色
  • 余白、パディング、コンテンツの最大幅

カスタムテーマを組み込みテーマと同じようにライトとダークへ自動で適応させたい場合は、組み込みテーマを複製するところから始めてください。複製したものはテーマ対応のベースを引き継ぐので、そこから調整できます。

CSS は視覚的な表現のみを調整し、基盤となる HTML は変更しないため、大掛かりな DOM の再構成はできません。

カスタムテーマの削除

カスタムテーマを選択し、スタイルメニューの削除アクションを使用します。最初に確認ダイアログが表示されます。削除したテーマが有効なテーマだった場合、MarkNode はデフォルトの組み込みテーマにフォールバックします。組み込みテーマには削除アクションがなく、削除できません。