コンテンツにスキップ

エディタとプレビュー

Bokuchi は左右に並んだ画面で、Markdown を左側に書き、整形された結果を右側でリアルタイムに確認できます。

分割ビュー — 左にエディタ、右にプレビュー
モード説明ショートカット
分割ビューエディタ + プレビューを並べて表示Ctrl+Shift+1
エディタのみエディタを全幅で表示Ctrl+Shift+2
プレビューのみプレビューを全幅で表示Ctrl+Shift+3

Ctrl+Shift+V で3つのモードを順に切り替えることができます。

分割ビューでは、エディタとプレビューのスクロールが連動します。設定 > インターフェース > スクロール同期 でスクロールの連動方式を選択できます:

モード説明
エディタ→プレビュー(デフォルト)エディタのスクロールがプレビューに反映されます。プレビューのスクロールはエディタに影響しません。
双方向どちらのペインをスクロールしても、もう一方が連動します。
オフ各ペインが独立してスクロールします。

プレビュー内のチェックボックスはクリックで切り替えられます。クリックすると、エディタ内の - [ ]- [x] が自動的に更新されます。

プレビュー内のリンクはクリック可能です。外部リンクはシステムのデフォルトブラウザで開きます。

コードブロックは 190 以上のプログラミング言語のシンタックスハイライトに対応しています。開始の3連バッククォートの後に言語名を指定します。

設定で有効にすると、プレビューで数式がレンダリングされます。$...$ でインライン数式、$$...$$ でブロック数式を表示できます。

KaTeX の数式がプレビューでレンダリングされている様子

設定で有効にすると、```mermaid コードブロックがプレビュー上で図表(フローチャート、シーケンス図など)としてレンダリングされます。現在のテーマに合わせて表示が変わります。

Mermaid のフローチャートがプレビューでレンダリングされている様子

設定で有効にすると、marp: true フロントマターを持つ Markdown ファイルがスライドプレゼンテーションとしてプレビューに表示されます。分割ビューではスライドがエディタと連動してスクロールします。プレビューのみモードでは、スライドが1枚ずつナビゲーションコントロール付きで表示されます。

詳しくは Marp プレゼンテーション をご覧ください。

エディタは Monaco Editor(VS Code と同じエディタエンジン)を使用しており、以下に対応しています:

  • シンタックスハイライト — Markdown の書式がカラー表示されます
  • 行番号 — 設定で表示/非表示を切り替え可能
  • 折り返し — 設定で切り替え可能
  • ミニマップ — ドキュメント全体の縮小表示。設定で切り替え可能
  • 空白文字の表示 — 不可視文字を表示