なぜMarkdownをHTMLに書き出すのは難しいのか？
Markdownは執筆の理想的なフォーマットです——プレーンテキスト、バージョン管理に向いており、コンテンツに集中できます。しかし共有する必要が生じると問題が起きます：.md ファイルをそのまま送ると相手はMarkdownビューアが必要です。PDFに変換すると印刷物っぽくなってモバイルでの読みやすさが低下します。リッチテキストエディターにコピーするとフォーマットが崩れがちです。
HTMLへの書き出しは最も自然な選択です——ブラウザーがネイティブにサポートし、どんなデバイスでも開けます。しかし「開ける」と「きれい」の間には大きな差があります：素のHTMLにはスタイルがなく、コードブロックはモノクロで、ダークモードは完全に欠けているか、CSSファイルを手動で管理する必要があります。
「きれいなHTML」とは何か？
高品質なMarkdown → HTML書き出しは以下の基準を満たすべきです：
- 単一ファイル——すべてのスタイルがインライン化され、外部CSS/JS/フォントに依存せず、誰にでも送れて任意の静的サーバーにホスティング可能
- ダークモード内蔵——
@media (prefers-color-scheme: dark)でシステム設定に自動追従、JSは不要 - テーマ対応コードブロック——全体のカラーパレットと調和したシンタックスハイライト
- 洗練されたタイポグラフィ——適切な行間、フォントサイズ、フォントスタック、段落間隔；テーブル、引用、数式もすべてスタイル済み
- コンテンツ幅のコントロール——ブラウザー全幅には広がらず、快適な読書幅を維持（通常65〜80文字）
Design Tokenテーマシステム
Mark.buildはテーマのコアアーキテクチャとしてDesign Tokenを使用しています。すべての視覚的プロパティ——テキスト色、背景色、コードブロック背景、アクセントカラー、角丸、フォント——はハードコードされた値ではなくTokenで一元管理されます。
Tokenは3層に分かれています：
- Primitive（原始値）——カラースケール（
blue.600、gray.100）、フォント名、フォントサイズ - Semantic（セマンティック）——
text-primary、bg-surface、accent、ライトとダークの両方の値を定義 - Component（コンポーネント）——
code-block.bg、table.header-bg、Semanticから自動的に派生
テーマを切り替えると、すべての要素——見出し、段落、コードブロック、Mermaidダイアグラム、KaTeX数式、テーブル——が同じTokenセットからスタイルを取得し、瞬時に更新されます。
Mark.buildでHTMLを書き出すステップバイステップガイド
ステップ1：エディターを開く
mark.build/editor にアクセスします。エディターはCodeMirror 6上に構築され、シンタックスハイライト、キーボードショートカット（⌘B 太字、⌘I 斜体、⌘K リンク）、スクロール同期プレビューをサポートします。すべてのドキュメントはブラウザーのローカルに保存され、サーバーにアップロードされません。
ステップ2：テーマを選ぶ
ツールバーのテーマセレクターをクリックして内蔵テーマから選択します：
- Default——クリーンなブルーアクセント、技術ドキュメントに最適
- Tech Blog——パープルアクセント + ダークコードブロック、Draculaスタイル
- Academic——セリフ見出しフォント、論文や長文ライティングに最適
- Minimal——ミニマリストなグレーパレット、視覚的ノイズを低減
- Magazine——レッドアクセント + Playfair Display見出し、マガジン風
ツールバーの太陽/月アイコンでライト/ダークモードを切り替えてプレビューできます。
ステップ3：HTMLを書き出す
右上の「エクスポート」をクリックして「HTMLを書き出す」を選択します。書き出されたファイルは完全に自己完結した .html ファイルです：
- すべてのCSSが
<style>タグにインライン化されています - ライトとダーク両方のCSS変数セットがファイルに書き込まれ、
@media (prefers-color-scheme: dark)で自動切り替え - MermaidダイアグラムはインラインSVGとして書き出され、外部ランタイム不要
その他の書き出し形式
HTMLの他に、Mark.buildは以下もサポートしています：
- PDF——ブラウザーの印刷ダイアログを使用、ライトモードのみ、印刷用文書に最適
- PNG——2倍ピクセル密度でプレビューエリアをキャプチャ、SNSシェアに最適
- リッチテキストコピー——スタイル付きHTMLをクリップボードにコピー、WeChat、Notion、メールクライアントに直接貼り付け可能
HTMLの書き出しの典型的な用途
- CMSなしで個人サイトや社内イントラネットに技術ドキュメントを公開
- クライアントや同僚への技術レポート——ファイル一つで完結、ソフトウェア不要
- メールにHTMLファイルを添付、相手はブラウザーで直接開ける
- GitHub PagesやCloudflare Pagesにアップロードして数秒でウェブページに
- 履歴書やポートフォリオの単ページ——美しいスタイリング、ダークモード自動対応
まとめ
Markdownの執筆ワークフローの終点は、スタイルが崩れたHTMLファイルであるべきではありません。Design Tokenで駆動するテーマシステムは、書き出されるすべてのファイルに完全なタイポグラフィシステムを保証します。
Mark.buildのゴールはこれをできる限りシンプルにすること：Markdownを書き、テーマを選び、書き出しをクリックする。あとはツールに任せてください。
今すぐ試す： エディターを開く →