zudo-text マニュアル

検索したい単語を入力

いつでも検索バーを開ける

プレビュー

書いた Markdown を、実際の見た目に整えて表示する面です。見出しの大きさ、リストの入れ子、表の罫線、コードの色分けまで、記法どおりに組まれた状態で確認できます。エディタと同じ frame の中で切り替えて使うほか、画面を分割して左右に並べることもできます。

読書会の案内を、見出し、番号付きの一覧、引用として整形したプレビュー部分

実際の macOS アプリのプレビュー部分を切り抜いています。Markdown の記号が、見出しや一覧、引用の見た目に変わります。

エディタとの切り替え

Mod+E を押すと、いま開いている frame がエディタとプレビューのあいだで入れ替わります。Command Palette（Mod+K で開く、コマンドの検索窓）の Toggle Editor/Preview でも同じ動きです。

キーボードを使わない場合は、Note Tray のユーティリティバー（開いている note に対する操作を並べた帯）の Preview で切り替えます。Note Tray toolbar（note が並んだ帯）の端にある Editor と Preview の切り替えも使えます。帯を上下に置いているときはアイコン 1 つのボタン、左右に置いているときは Editor と Preview が並んだ切り替えになります。

左右に並べて見たい場合は frame を分割します。分割のしかたは レイアウト で扱います。

表示できる書きかた

標準的な Markdown に加えて、次の書きかたが表示に反映されます。

  • 表 — | で区切って書いた表が、罫線付きで組まれます。

  • チェックリスト — - [ ] と - [x] が、チェックボックスとして表示されます。

  • 打ち消し線 — ~~文字~~ で囲んだ部分に線が入ります。

  • 自動リンク — https:// で始まる文字列が、そのままリンクになります。

  • 脚注 — 本文中の参照と、末尾の脚注の定義が対応付けられます。

このほか、注意書きの囲みや段組みなどを差し込む directive にも対応しています。詳しくは カスタムコンポーネント にまとめています。

コードブロック

コードをバッククォート 3 つで囲み、言語名を書いておくと、その言語に合わせて色が付きます。ブロックの右上には 2 つのボタンがあります。

  • 折り返しの切り替え — 長い行を折り返すか、横スクロールさせるかを選びます。

  • コピー — ブロックの中身をクリップボードにコピーします。押すと表示が Copied! に変わります。

目次

プレビューの右上にあるボタンで、見出しから作られた目次を出せます。見出しをクリックすると、その位置まで移動します。読んでいる位置に合わせて、目次側の現在地も動きます。

このボタンを出すかどうかは Settings → Toolbars の Preview Pane Toolbar で決めます。プレビューの右上を右クリック（タッチなら長押し）しても同じ切り替えが出ます。

Scroll Sync

同じ note をエディタとプレビューで左右に並べているとき、片方をスクロールすると、もう片方も対応する内容の位置までゆっくり追従します。見出しや段落など、両方にある内容の位置を基準に合わせるため、表示の折り返しやコードブロック・画像の高さが違っても、文書の割合だけで合わせるより自然に動きます。

切り替えは、2 つの frame の境目にある鎖のアイコンをクリックします。オンのときは色が付き、オフのときは薄く表示されます。Command Palette の Toggle scroll sync からも切り替えられます。

このアイコンは、次のすべてに当てはまるときだけ出ます。

  • 2 つの frame が 1 つの境目を共有しています。

  • 両方の frame が同じ note を開いています。

  • 両方の frame がエディタかプレビューです。かんばんボードやマインドマップでは出ません。

分割を解いたり、片方を別の画面に変えたりすると、アイコンは消えて連動も止まります。もう一度並べ直したときは、オフの状態から始まります。追従を止めたいときは、同じ鎖のアイコンをもう一度クリックしてください。Reduced motion を使う設定では、追従のアニメーションを省略して位置をすぐに合わせます。

なお、これは行をピクセル単位で完全に一致させる機能ではありません。対応するアンカーの間は内容の位置から補間し、アンカーが少ないブロックの内部や文書の端では、ブロック全体・実際に描画された末尾を使った近似になります。長いコードブロック、大きな画像、遅れて描画される図では、数行または数ピクセルの差が残ることがあります。

このコマンドには最初キーが割り当てられていません。使いたい場合は Settings → Shortcuts で割り当ててください。

スクロールの操作

プレビューの中をクリックしてから Space を押すと 1 画面分だけ下に、Shift+Space で 1 画面分だけ上に動きます。Command Palette の Preview: Scroll down と Preview: Scroll up でも同じ操作ができます。

プレビューの中のボタンやリンクを選んでいるときは、Space はそのボタンを押す動作になります。

Space と Shift+Space は Settings → Shortcuts に項目が無いキーなので、別のキーに変えることはできません。

プレビューのテーマ

プレビューの見た目は、エディタの配色とは別に選べます。既定は Foundry で、明るい配色と暗い配色を合わせて 20 種類が最初から用意されています。

  • Settings → Preview の Preview Theme から選びます。

  • プレビューの右上にあるテーマのボタンからも選べます。このボタンを出すかどうかは Settings → Toolbars の Preview Pane Toolbar で決めます。

  • Command Palette の Preview: Next theme（Mod+Shift+F10）、Preview: Previous theme、Preview: Choose theme… でも切り替えられます。

Mod+Shift+F10 も Settings → Shortcuts に項目が無いキーなので、別のキーに変えることはできません。

自分で配色を作ることもできます。手順は テーマ で扱います。

目次とテーマの両方を隠すと、プレビューの右上には何も表示されなくなります。そこには右クリックを受け付けるだけの小さな場所が残っているので、右上の角を右クリックすればいつでも戻せます。

右クリックのメニュー

プレビューを右クリックすると、クリックした場所に応じた項目が出ます。

  • Copy — 選んでいる文字をコピーします。

  • Enlarge image / Save image as… / Copy image filename — 画像の上で押したときに出ます。

  • Copy link URL / Download file — リンクの上で押したときに出ます。

  • Copy code / Copy source / Copy text — コードや文章を、表示どおりまたは記法のままコピーします。

  • Edit this table/sheet… — 表の上で押すと、表を編集するダイアログが開きます。

  • Edit this section in editor — その見出しの範囲を、エディタ側で開き直します。

  • Copy block as Markdown — その段落や表を、記法のままコピーします。

  • Find in preview… — 表示中の文字を探します。

  • Toggle table of contents — 目次の表示を切り替えます。

  • Preview theme — Choose…、Next theme、Previous theme が並びます。

  • Print… — 印刷に進みます。

  • Copy document (without frontmatter) — frontmatter を除いた本文全体をコピーします。

macOS がもともと持っているメニューを使いたい場合は、Settings → Editor の Native Context Menu をオンにします。この設定はエディタとプレビューの両方に効きます。

印刷

右クリックのメニューの Print…、または Command Palette の Print Preview から、OS の印刷ダイアログを開きます。印刷されるのは、プレビューに出ているとおりの体裁です。PDF として保存したい場合も、この印刷ダイアログから行います。

このコマンドにも最初キーが割り当てられていません。Settings → Shortcuts で割り当てられます。

関連ページ