コンテンツにスキップ

エディタとプレビュー

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

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

Cmd+Shift+D(macOS)/ Ctrl+Shift+D(Windows / Linux)で3つのモードを順に切り替えることができます。

Bokuchi は現在の表示モードを記憶し、次回の起動時にそのモードで開きます。毎回好みのレイアウトに切り替え直す必要はありません(初回起動時は分割ビューで始まります)。

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

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

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

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

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

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

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

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

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

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

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

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

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

リスト・チェックボックスの連続入力

Section titled “リスト・チェックボックスの連続入力”

リストの行で Enter を押すと、次の行に同じ記号が自動で入力されます。-1. を毎回入力し直す必要はありません:

  • 箇条書き(-*+)は同じ記号で続きます
  • 番号付きリスト(1.2. …)は次の番号で続きます
  • チェックボックス(- [ ])は未チェックの状態で続きます

空のリスト項目で Enter を押すとリストが終わり、記号が消えて空行になります。

また、リストの行で Tab を押すと 1 段深くインデントされ、Shift+Tab で 1 段浅くなります。

ドラッグ&ドロップや貼り付けで画像を挿入

Section titled “ドラッグ&ドロップや貼り付けで画像を挿入”

画像ファイルをエディタにドロップすると、その場所に Markdown の画像リンクが挿入されます。ドラッグ中は「画像をここにドロップ」というオーバーレイが表示されるので、挿入先がひと目でわかります。複数の画像をまとめてドロップすることもできます。

リンクはドキュメントからの相対パスになるため、フォルダごと共有してもリンクが切れません:

  • ドキュメントと同じフォルダ内にある画像は、そのまま相対パスでリンクされます
  • フォルダの外にある画像は、ドキュメントの隣の images フォルダにコピーされます

スクリーンショットなどの画像を、エディタに直接貼り付けることもできます。画像は日時入りのファイル名で images フォルダに保存され、カーソル位置にリンクが挿入されます。