プレビュー

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

エディタとの切り替え

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

キーボードを使わない場合は、Note Tray toolbar（note が並んだ帯）の端にある action cluster の Editor と Preview で切り替えます。帯を上下に置いているときはアイコン 1 つのボタン、左右に置いているときは Editor と Preview が並んだ切り替えになります。

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

表示できる書きかた

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

表 — | で区切って書いた表が、罫線付きで組まれます。
チェックリスト — - [ ] と - [x] が、チェックボックスとして表示されます。
打ち消し線 — ~~文字~~ で囲んだ部分に線が入ります。
自動リンク — https:// で始まる文字列が、そのままリンクになります。
脚注 — 本文中の参照と、末尾の脚注の定義が対応付けられます。

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

コードブロック

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

折り返しの切り替え — 長い行を折り返すか、横スクロールさせるかを選びます。
コピー — ブロックの中身をクリップボードにコピーします。押すと表示が Copied! に変わります。

Scroll Sync

同じ note をエディタとプレビューで左右に並べているとき、片方をスクロールするともう片方も同じ位置まで動きます。

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

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

2 つの frame が 1 つの境目を共有しています。
両方の frame が同じ note を開いています。
両方の frame がエディタかプレビューです。かんばんボードやマインドマップでは出ません。

分割を解いたり、片方を別の画面に変えたりすると、アイコンは消えて連動も止まります。もう一度並べ直したときは、オフの状態から始まります。

なお、位置合わせは文書全体に対する割合で計算しています。長いコードブロックや大きな画像がたくさんある note では、行が 1 対 1 で並ぶとはかぎりません。

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

スクロールの操作

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

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

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