oxct

@ox-content/napi を使った最小の Markdown エディタ。 表示は描画済みの HTML だけで、クリックしたところだけが生の Markdown に変わる（Obsidian のライブプレビューと同じ操作感）。

セットアップ

Node.js 20 以上と npm が必要です。@ox-content/napi のネイティブバイナリが対応する環境で動作します。

リポジトリを clone したディレクトリで実行します。

npm ci
npm start -- sample.md

sample.md は動作確認用の Markdown です。保存すると実際のファイルが更新されます。

CLI としてインストールする

clone したディレクトリで次を実行すると、任意のディレクトリから oxct を使えます。

npm ci
npm link
oxct sample.md

npm link は clone したディレクトリへのシンボリックリンクを作ります。 このディレクトリは削除・移動せずに残してください。ソースの変更は次回起動時に反映されます。 パッケージ名は md-edit、CLI コマンド名は oxct です。

~/.local/bin に配置する（Linux / macOS）

配置先を明示する場合は、上の npm link の代わりに次を実行します。

npm link --prefix "$HOME/.local"
export PATH="$HOME/.local/bin:$PATH"
command -v oxct

export PATH=... の行は、使っているシェルの設定ファイル（Bash なら ~/.bashrc、Zsh なら ~/.zshrc）にも追加します。 すでに ~/.local/bin が PATH に含まれていれば追加は不要です。

リンクは次の構成になります。

~/.local/bin/oxct → ~/.local/lib/node_modules/md-edit/md-edit.mjs
~/.local/lib/node_modules/md-edit → clone したディレクトリ

npm config get prefix が ~/.local に相当するパスを返す環境では、通常の npm link でもこの配置になります。

アンインストール

npm unlink -g md-edit
# --prefix で ~/.local を指定した場合
npm unlink -g --prefix "$HOME/.local" md-edit

リンクせずに使うなら node md-edit.mjs sample.md でも同じです。

起動オプション

ブラウザが http://localhost:5173/ を開く。埋まっていれば空きポートを探す。

• --port 5180 … ポートを固定する（このときは空き探しをしない）
• --no-open … ブラウザを開かない

node md-edit.mjs sample.md --port 5180 --no-open

終了するにはターミナルで Ctrl+C を押します。

操作

操作	動き
本文をクリック	そのブロックだけ Markdown ソースになる。クリックした高さの行にキャレットが入る
Esc / 他をクリック / Ctrl+Enter	編集を確定して描画に戻る
末尾の余白をクリック	末尾に新しいブロックを足して編集を始める
チェックボックスをクリック	ソースの [ ] / [x] が切り替わる
.md へのリンクをクリック	そのファイルを開く。外部リンクは新しいタブ
開く… / Ctrl+O	ファイル一覧から切り替え（絞り込み付き）
保存 / Ctrl+S	ファイルに保存
ソース	全文を 1 つのテキストエリアで編集
下部の指摘をクリック	その行を編集状態にする

コードフェンスの言語を mermaid にすると図として描画される。構文が壊れているときはソースのまま残り、下に mermaid のエラーが出る。

開けるのは最初に渡したファイルのディレクトリ配下だけ。サーバは 127.0.0.1 にのみバインドする。

しくみ

ox-content の AST には位置情報が無いので、blocks.mjs でソースを行単位のブロック（見出し・段落・リスト・表・コードフェンス・フロントマター）に切り、 ブロックごとに [startLine, endLine) を持たせて描画している。編集の確定はその行範囲を差し替えるだけ。

用途	API
Markdown → HTML	parseAndRender(src, { gfm: true })
サニタイズ	sanitizeHtml(html)
コードのハイライト	highlightHtmlCodeBlocks(html)
文書の検査	lintMarkdown(src, { rules: { spellcheck } })

mermaid だけはブラウザ側で描いている。napi の transformMermaid() は mermaid-cli（puppeteer）をプロセス起動する前提で、 1 文字打つたびに走らせる用途には重すぎるため、同梱の mermaid を /vendor/mermaid.min.js として配って mermaid.render() を呼んでいる（外部 CDN は使わないのでオフラインでも動く）。

ハイライトは --octc-syntax-* の CSS 変数で色を差し替えられるので、ダークモードは prefers-color-scheme で切り替えている。

ブロック分割の制約

各ブロックを独立に描画しているので、文書の別の場所で定義された参照リンク（[a]: http://…）や脚注は、 そのブロック単体では解決できず、リンクにならずに素のテキストで出る。ソース に切り替えれば編集はできる。

構成

• md-edit.mjs — CLI とローカル HTTP サーバ（/api/doc, /api/render, /api/save, /api/files）
• blocks.mjs — 行ベースのブロック分割
• editor-page.mjs — エディタ画面の HTML/CSS/JS（依存なし）

開発

ビルドは不要です。変更後はサーバを再起動し、ブラウザを再読み込みしてください。 JavaScript の構文は次のコマンドで確認できます。

node --check md-edit.mjs
node --check blocks.mjs
node --check editor-page.mjs

依存関係の再現性を保つため、package-lock.json も Git で管理します。