エディタとプレビュー
Bokuchi は左右に並んだ画面で、Markdown を左側に書き、整形された結果を右側でリアルタイムに確認できます。
| モード | 説明 | ショートカット |
|---|---|---|
| 分割ビュー | エディタ + プレビューを並べて表示 | Ctrl+Shift+1 |
| エディタのみ | エディタを全幅で表示 | Ctrl+Shift+2 |
| プレビューのみ | プレビューを全幅で表示 | Ctrl+Shift+3 |
Cmd+Shift+D(macOS)/ Ctrl+Shift+D(Windows / Linux)で3つのモードを順に切り替えることができます。
Bokuchi は現在の表示モードを記憶し、次回の起動時にそのモードで開きます。毎回好みのレイアウトに切り替え直す必要はありません(初回起動時は分割ビューで始まります)。
同期スクロール
Section titled “同期スクロール”分割ビューでは、エディタとプレビューのスクロールが連動します。設定 > インターフェース > スクロール同期 でスクロールの連動方式を選択できます:
| モード | 説明 |
|---|---|
| 双方向(デフォルト) | どちらのペインをスクロールしても、もう一方が連動します。 |
| エディタ→プレビュー | エディタのスクロールがプレビューに反映されます。プレビューのスクロールはエディタに影響しません。 |
| オフ | 各ペインが独立してスクロールします。 |
プレビューの機能
Section titled “プレビューの機能”チェックボックスの操作
Section titled “チェックボックスの操作”プレビュー内のチェックボックスはクリックで切り替えられます。クリックすると、エディタ内の - [ ] と - [x] が自動的に更新されます。
プレビュー内のリンクはクリック可能です。外部リンクはシステムのデフォルトブラウザで開きます。
コードブロック
Section titled “コードブロック”コードブロックは 190 以上のプログラミング言語のシンタックスハイライトに対応しています。開始の3連バッククォートの後に言語名を指定します。
数式(KaTeX)
Section titled “数式(KaTeX)”設定で有効にすると、プレビューで数式がレンダリングされます。$...$ でインライン数式、$$...$$ でブロック数式を表示できます。
図表(Mermaid)
Section titled “図表(Mermaid)”設定で有効にすると、```mermaid コードブロックがプレビュー上で図表(フローチャート、シーケンス図など)としてレンダリングされます。現在のテーマに合わせて表示が変わります。
プレゼンテーション(Marp)
Section titled “プレゼンテーション(Marp)”設定で有効にすると、marp: true フロントマターを持つ Markdown ファイルがスライドプレゼンテーションとしてプレビューに表示されます。分割ビューではスライドがエディタと連動してスクロールします。プレビューのみモードでは、スライドが1枚ずつナビゲーションコントロール付きで表示されます。
詳しくは Marp プレゼンテーション をご覧ください。
エディタの機能
Section titled “エディタの機能”エディタは Monaco Editor(VS Code と同じエディタエンジン)を使用しており、以下に対応しています:
- シンタックスハイライト — Markdown の書式がカラー表示されます
- 行番号 — 設定で表示/非表示を切り替え可能
- 折り返し — 設定で切り替え可能
- ミニマップ — ドキュメント全体の縮小表示。設定で切り替え可能
- 空白文字の表示 — 不可視文字を表示
リスト・チェックボックスの連続入力
Section titled “リスト・チェックボックスの連続入力”リストの行で Enter を押すと、次の行に同じ記号が自動で入力されます。- や 1. を毎回入力し直す必要はありません:
- 箇条書き(
-、*、+)は同じ記号で続きます - 番号付きリスト(
1.、2.…)は次の番号で続きます - チェックボックス(
- [ ])は未チェックの状態で続きます
空のリスト項目で Enter を押すとリストが終わり、記号が消えて空行になります。
また、リストの行で Tab を押すと 1 段深くインデントされ、Shift+Tab で 1 段浅くなります。
ドラッグ&ドロップや貼り付けで画像を挿入
Section titled “ドラッグ&ドロップや貼り付けで画像を挿入”画像ファイルをエディタにドロップすると、その場所に Markdown の画像リンクが挿入されます。ドラッグ中は「画像をここにドロップ」というオーバーレイが表示されるので、挿入先がひと目でわかります。複数の画像をまとめてドロップすることもできます。
リンクはドキュメントからの相対パスになるため、フォルダごと共有してもリンクが切れません:
- ドキュメントと同じフォルダ内にある画像は、そのまま相対パスでリンクされます
- フォルダの外にある画像は、ドキュメントの隣の
imagesフォルダにコピーされます
スクリーンショットなどの画像を、エディタに直接貼り付けることもできます。画像は日時入りのファイル名で images フォルダに保存され、カーソル位置にリンクが挿入されます。
次のステップ
Section titled “次のステップ”- Markdown ツールバー — ボタンでテキストを装飾する
- 集中モード — 周囲の UI を隠して執筆に集中する
- 検索と置換 — テキストの検索・置換
- ズーム — 画面サイズを調整する