機能
このページでは、実際の実装に沿って組み込み機能を説明します。
差分描画
プレビューはブロック単位の差分描画により、大きな文書でも操作への応答を保ちます。
- ブロック分割（
splitIntoBlocks）：ATX 見出し（#から######）でソースを分割します。バッククォートやチルダのコードフェンス内は分割せず、:::カスタムコンテナー内の見出しも保持します。見出しのない文書は 1 ブロックになります。 - ブロックごとの描画： 内容のハッシュが変化したブロックだけを markdown-it / KaTeX で再処理します。それ以外は、初期化済みのマインドマップ SVG を含む DOM ノードを直接再利用します。
- 内容ハッシュによるキャッシュ： 高速な djb2 形式のハッシュと文字数を組み合わせて結果を保存します。元に戻す・やり直す操作や同一段落の貼り付けでもキャッシュを利用できます。800 件を超えると、現在の文書に存在しないハッシュを削除します。現在のブロックは保持するため、異なるブロックが 800 個を超える文書では、このしきい値を超えることがあります。
- 並べ替え： 既存ノードを
DocumentFragmentに追加し、ブラウザーの標準動作で移動します。 - 適応型デバウンス（
adaptiveDebounceMs(docLength, base = 120, max = 600)）：待機時間はbase + floor(docLength / 20000) * 60で、上限はmaxです。renderDebounceで変更でき、renderDebounce: falseで同期描画になります。 content-visibility: auto： 各ブロックを.md-editor-block要素で囲み、画面外のブロックのレイアウトと描画を省略できるようにします。
1 ブロックの描画が失敗しても、プレビュー全体は空になりません。そのブロックのソースをエスケープし、<pre> に表示します。
KaTeX 数式
独立した markdown-it 数学プラグインは KaTeX を使用し、markdown-it-texmath に依存しません。
- インライン数式：
$E=mc^2$。内容は空にできず、$や改行を含められません。$5や$10.50のような金額はヒューリスティックに除外します。 - ブロック数式：
1 行（$$\int_0^1 x^2 \, dx$$
$$ ... $$）と複数行の両方に対応し ます。KaTeX CSS はパッケージに含まれます。math: falseで無効にできます。
Markmap マインドマップ
```mindmap のフェンス付きブロック内に Markdown のアウトラインを記述します。
```mindmap
# Root topic
## Branch one
- Child A
- Child B
## Branch two
- Child C
```
ブロックルールはフェンスのネスト深度を追跡し、マインドマップ内のコードフェンスを保持します。同期描画ではプレースホルダーの <div> を生成し、Renderer.hydrate(container) が markmap-lib と markmap-view を非同期でインポートして対話可能な SVG に変換します。初期化の失敗は致命的ではありません。mindmap: false で無効にできます。
コードのハイライトとコピー
フェンス付きコードブロックには highlight.js を使用します。JavaScript、TypeScript、Python、JSON、Bash/Shell、CSS、XML/HTML/SVG、SQL、YAML、Markdown、Go、Rust、Java、C、C++ と、js、ts、py、sh、yml、md、rs、c++ などの別名を登録しています。不明な言語は自動検出し、失敗した場合はエスケープしたプレーンテキストに戻ります。
各ブロックは macOS 風のコンテナーに入り、3 色の丸、言語ラベル、コピーボタンを表示します。コピーにはプレビュー領域でのイベント委譲を使い、Clipboard API がなければ document.execCommand('copy') を使用します。codeHighlight: false で無効にできます。
ツールバーの操作
complex モードのツールバーは、次の順序で 22 の操作を提供します。
| # | 操作名 | 用途 |
|---|---|---|
| 1 | heading | 見出し |
| 2 | bold | 太字（Ctrl+B） |
| 3 | italic | 斜体（Ctrl+I） |
| 4 | link | リンク（Ctrl+K） |
| 5 | image | 画像を挿入 |
| 6 | video | 動画を挿入 |
| 7 | youtube | YouTube 動画を挿入 |
| 8 | quote | 引用 |
| 9 | ul | 箇条書き |
| 10 | ol | 番号付きリスト |
| 11 | tasklist | タスクリスト |
| 12 | mention | メンション（@） |
| 13 | doclink | ドキュメントリンクを挿入 |
| 14 | code | コードブロック |
| 15 | table | 表 |
| 16 | math | 数式 |
| 17 | mindmap | マインドマップを挿入 |
| 18 | hr | 水平線 |
| 19 | tips | 注記を挿入 |
| 20 | preview | プレビューを切り替え |
| 21 | help | キーボードショートカット |
| 22 | theme | テーマを切り替え |
組み込みラベルは英語です。項目ごとの label を上書きすると、ツールチップとアクセシブルな名前を翻訳できます。画像、動画、YouTube、表、数式テンプレート、マインドマップテンプレート、注記タイプ、ヘルプの操作はダイアログや選択画面を開きます。toolbar による設定は設定を参照してください。
キーボードショートカット
組み込みショートカットは DEFAULT_SHORTCUTS に定義されています。Mod は Windows/Linux では Ctrl、macOS では Cmd に対応します。
| キー | 操作 | 説明 |
|---|---|---|
Mod-b | bold | 太字 |
Mod-i | italic | 斜体 |
Mod-Alt-1 | heading | 見出し |
Mod-k | link | リンクを挿入 |
Mod-Alt-c | code | コードブロック |
Mod-Shift-. | quote | 引用ブロック |
Mod-Shift-8 | ul | 箇条書き |
Mod-Shift-7 | ol | 番号付きリスト |
Mod-Shift-9 | tasklist | タスクリスト |
Mod-Alt-m | math | 数式 |
Mod-Alt-p | preview | プレビュー を切り替え |
Mod-Shift-l | theme | テーマを切り替え |
ツールバーのヘルプは、キーの形で表示したショートカット一覧と、タスクリスト、メンション、ドキュメントリンク、数式、マインドマップ、注記の早見表を開きます。
画像アップロード
onImageUpload: (file: File) => Promise<string> を指定します。エディターに画像ファイルを貼り付けるかドロップすると呼び出されます。画像ダイアログは URL 入力用で、ファイル選択機能はありません。公開画像 URL を返すと、拡張子を除いたファイル名を代替テキストにして、カーソル位置に  を挿入します。アップロード失敗はエラー表示なしで捕捉され、ユーザーは再試行できます。
@メンション
mention オプションで、@ 入力時の検索可能なドロップダウンを設定します。
onMentionSearch(query)は一致するMentionItemを返します。onMentionSelect(item)は挿入するテキストを返します。既定は[@label](mention:id)で、プレビューでは装飾付きのバッジになります。minChars（既定0） とmaxItems（既定8）でドロップダウンを調整します。
上下矢印、Enter/Tab、Escape に対応し、エディターがフォーカスを失うと閉じます。プレビューでは @media のような通常の @ テキストはバッジにならず、mention: スキームのリンクだけが変換されます。一方、エディターでは、このようなテキストでも設定済みの検索フックが呼び出される場合があります。
ドキュメントリンク
docLink オプションで、トリガー文字（既定 /）の後にドキュメント検索を有効にします。
onDocSearch(query)は一致するDocItemを返します。onFetchDocMeta(url)はタイトル、サムネイル、説明を取得します。組み込み実装はfetchとDOMParserで Open Graph タグを読み取ります。別オリジンのサーバーが CORS を許可しない場合は失敗することがあるため、必要に応じてカスタムのバックエンドプロキシを使用してください。insertStyleは挿入形式を制御します。'auto'はメタデータがあればカードを使い、ほかに'card'または'link'を選べます。
選択したドキュメントは通常のリンク、またはタイトル、サムネイル、説明、ホスト名を表示するクリック可能な :::doc-link カードとして挿入します。
注記ブロック
::: コンテナーに 6 種類のいずれかを指定します。開始行のタイプ名の後に任意のタイトルを追加できます。
:::notice
This is a notice.
:::
:::warning[Title here]
Warning content.
:::
対応タイプは notice、info、tip、success、warning、danger です。アイコン、色付きの左境界線、ヘッダーを表示します。ツールバーの注記ボタンは全 6 種類の選択画面を開きます。tips: false で無効にできます。
タスクリスト
- [ ] または - [x] に一致する項目は、操作できないチェックボックスになります。角括弧内の空白は任意です。このプロジェクトでは、- [ ] がチェック済みの緑色、- [x] が未チェックとなり、GitHub Flavored Markdown とは逆です。ツールバーのタスクリストボタンは現在の行または選択行のマーカーを切り替えます。
次のステップ
- 設定 — オプションで各機能を調整します。
- API リファレンス — コードからエディターを操作します。