機能一覧

描画性能#

Markdown 記法#

CommonMark と GitHub Flavored Markdown に加えて、次にも対応しています。

数式#

KaTeX で描画します。MathJax よりはるかに高速です。

• インライン：$E = mc^2$ または \(E = mc^2\)
• ブロック：$$…$$ または \[…\]
• 行列、aligned による複数行の整列、cases の場合分け、総和・積分、ギリシャ文字、主要パッケージの記号に対応

リーダーは $ を保護的に判定するので、$100 や $5 - $10 のような価格表記が数式と誤認されることはありません。

図表#

Mermaid で描画します。```mermaid のコードブロックに書くだけです。フローチャート、シーケンス図、クラス図、状態遷移図、ER 図、ガントチャート、円グラフ、ユーザージャーニー、マインドマップ、Git グラフ、四象限図、タイムラインに対応しています。

図表のテーマはサイトのテーマ変数に連動しており、ダークモードに切り替えると自動的に配色を変えて再描画されます。図表にカーソルを合わせると、右上からソースのコピーや SVG のダウンロードができます。

シンタックスハイライト#

• サーバー側は Chroma（ドキュメントページ）、クライアント側は highlight.js（リーダー）が担当します。同じ配色変数を共有しているため、見た目は一致します
• 各コードブロックには言語ラベル、コピーボタン、行番号の切り替え、折り返しの切り替えが付きます
• 24 行を超えると自動で折りたたまれ、クリックで展開できます
• title でファイル名を示せます。

1
2
3

```js {title="app.js"}
const a = 1;
```

注記ブロック#

2 通りの書き方に対応しています。GitHub 形式（このドキュメントとリーダーの両方で使えます）:

1
2
3
4
5
6
7
8

> [!NOTE]
> 一般的な補足

> [!TIP]
> 実用的な提案

> [!WARNING]
> 注意が必要な点

コンテナ形式（リーダー専用。ドキュメントページでは解釈されません）:

1
2
3

::: tip 独自のタイトル
コンテナ記法は note / tip / important / warning / caution / danger / details に対応します
:::

6 種類：NOTE TIP IMPORTANT WARNING CAUTION DANGER。

フロントマター#

YAML（---）、TOML（+++）、JSON（{}）のいずれも認識します。title、description、date、author、tags、categories は文書のヘッダーに取り出して表示し、それ以外の項目は「フロントマター」カードに折りたたみます。

読みやすさ#

テーマ#

• ライト / ダーク / システムに合わせるの 3 段階。D で順に切り替わります
• 最初の描画前にインラインスクリプトでテーマを適用するため、白い点滅が起きません
• ダークモードではコード、図表、数式の色がすべて連動して変わります

組版の調整#

, で設定パネルを開きます。

設定はブラウザーの localStorage に保存され、ページやセッションをまたいで保持されます。

ナビゲーション#

• ファイルツリー：ディレクトリを折りたためます。ファイル名でリアルタイムに絞り込めます
• アウトライン：見出しレベル 2〜4 を対象に、IntersectionObserver でスクロール中の現在位置を示します。アウトライン自体も追従してスクロールします
• 読書進捗：上部のグラデーションバー。600px を超えるとページ先頭に戻るボタンが現れます
• 位置の記憶：文書ごとのスクロール位置を割合で保存し、再訪時に復元します
• 前後の移動：J と K でファイル一覧を前後に移動します

画像#

クリックでライトボックスを開きます。ホイールで拡大縮小、ドラッグで移動、ダブルクリックで 1×/2× の切り替え、+ - 0 のキー操作、そのままダウンロードもできます。

検索#

リーダー内のファイル横断検索#

/ または Ctrl+K で開きます。フォルダーを読み込むと、バックグラウンドで全 Markdown を読み取り Fuse.js のあいまい索引を作ります。重みはタイトル > ファイル名 > 本文 > パスの順です。結果にはファイルパスと該当箇所をハイライトした抜粋が並び、矢印キーで選択、Enter で開きます。

文書内検索#

F または Ctrl+F で、現在の文書内の一致箇所を順にハイライトします。Enter で次へ、Shift+Enter で前へ移動し、「何件中の何件目か」を表示します。

サイト全体の検索#

ドキュメントページの索引はあらかじめ生成されており、検索ボックスはその索引をブラウザー内だけで参照します。バックエンドへのリクエストはありません。

編集#

M で編集モードに入ります。左に Markdown のソース、右にリアルタイムプレビュー（260 ms のデバウンス）が並び、中央の仕切りはドラッグでき、その比率は設定に記憶されます。

• ツールバー：見出し、太字、斜体、取り消し線、インラインコード、3 種類のリスト、引用、リンク、画像、テーブル、コードブロック、数式、Mermaid、注記ブロック、区切り線。適用済みの書式はもう一度押すと解除できます
• キーボード：Ctrl+B/I/K で太字・斜体・リンク。Tab は複数行の選択をまとめてインデントします。リスト内で Enter を押すと自動で継続し番号も増え、空の項目で押すとリストが終わります。すべての操作は execCommand を通すので、ブラウザー標準の取り消し履歴がそのまま使えます
• 保存：Ctrl+S でローカルの元ファイルに書き戻します。初回の保存時にブラウザーが許可を求め、それまでの読み取り専用の許可が読み書きに引き上げられます
• 下書き：1.2 秒のアイドルごとに内容を IndexedDB に保存します。ファイルの切り替え、ワークスペースを閉じる、ページを閉じる、いずれの場合も未保存の変更があれば確認が入ります。次にそのファイルを開いたとき、下書きの復元を案内します
• Mermaid キャッシュ：プレビューは図表のソース単位で描画結果をキャッシュするため、入力のたびに再描画されることはありません

書き出し#

PDF 書き出しでは、用紙（A4 / Letter / A5）、向き、余白、本文の倍率、表紙、クリックできる目次ページ、H1 や H2 で改ページするか、コードを折り返すか、外部リンクの URL を印刷するかを指定できます。ダークテーマのときは Mermaid の図表を一時的にライト配色で描き直すので、暗い背景に淡い文字を印刷してしまうことがありません。

実装の仕組み#

依存とサイズ#

依存はすべてビルド時に成果物へ同梱されるため、実行時に外部の CDN へは一切アクセスしません。完全にオフラインで配備でき、外部リソースが遮断される心配もありません。

プライバシー#

• ファイルの読み書きはすべてブラウザー内で完結し、アップロードは一切ありません
• 第三者のスクリプトを読み込まず、計測タグも解析も Cookie もありません
• 設定は localStorage、ディレクトリのハンドル・読書位置・編集中の下書きは IndexedDB に、いずれも自分の端末内に保存されます

多言語対応#

インターフェースは English、簡体字中国語、繁体字中国語、日本語、Español、Français の 6 言語で利用できます。英語がルート、ほかは /zh/、/zh-hant/、/ja/、/es/、/fr/ の下にあり、それぞれ共有できる独立した URL を持ちます。ヘッダーの地球アイコンからいつでも切り替えられ、対応する翻訳があればそのページに移動します。

インターフェースの文言は data/i18n/<lang>.toml にまとまっており、テンプレートとブラウザー側スクリプトが同じ表を共有します。ページが読み込むのは自分の言語の分だけです。初回訪問時、ブラウザーの言語が表示中のページと違えば、画面下部に切り替えの案内が一度だけ出ます（完全に閉じられます）。

関連#

• Markdown 記法サンプル
• キーボードショートカット