Markdown HTML 変換
Markdownを貼り付けるだけで、Webサイトやブログ、メールのテンプレートに使えるHTMLが得られます。ブラウザでそのまま開ける完全なページも保存できます。内容はアップロードされません。
Markdown
442 文字28 行
<h1 id="はじめに">はじめに</h1>
<p>パッケージをインストールし、必要な場所で読み込みます。すべてのオプションは<a href="https://example.com/docs">ガイド</a>にあります。</p>
<h2 id="インストール">インストール</h2>
<pre><code class="language-bash">npm install field-notes
</code></pre>
<h2 id="オプション">オプション</h2>
<table>
<thead>
<tr>
<th align="left">オプション</th>
<th align="center">既定値</th>
<th align="left">説明</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left"><code>sync</code></td>
<td align="center"><code>true</code></td>
<td align="left">オンライン時に記録をアップロード</td>
</tr>
<tr>
<td align="left"><code>quality</code></td>
<td align="center"><code>0.8</code></td>
<td align="left">写真の JPEG 品質</td>
</tr>
</tbody>
</table>
<h2 id="チェックリスト">チェックリスト</h2>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" checked disabled> アカウントを作成</li>
<li class="task-list-item"><input type="checkbox" disabled> チームを招待</li>
</ul>
<p><kbd>Ctrl</kbd> + <kbd>S</kbd> で保存します。1 日分の記録は約 <span class="katex"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>n</mi><mo>×</mo><mn>2.5</mn></mrow><annotation encoding="application/x-tex">n \times 2.5</annotation></semantics></math></span> MB です。<sup><a href="#user-content-fn-1" id="user-content-fnref-1" data-footnote-ref="" aria-describedby="user-content-footnote-label">1</a></sup></p>
<blockquote>
<p><strong>注意：</strong> 同期するまで、記録は端末にだけ保存されます。</p>
</blockquote>
<section data-footnotes="" class="footnotes"><h2 class="sr-only" id="user-content-footnote-label">Footnotes</h2>
<ol>
<li id="user-content-fn-1">
<p>既定の品質で写真を <span class="katex"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>n</mi></mrow><annotation encoding="application/x-tex">n</annotation></semantics></math></span> 枚撮った場合。 <a href="#user-content-fnref-1" data-footnote-backref="" aria-label="Back to reference 1" class="data-footnote-backref">↩</a></p>
</li>
</ol>
</section>1869 文字
対応している内容
- きれいで意味のあるHTML
- 見出し、リスト、
align付きの表、<pre><code class="language-js">のコードブロック、脚注を、余計な囲みやインラインスタイルなしで出力します。 - 標準で安全
- Markdown内に書いたHTMLは残し、
<script>、onclickなどのイベント属性、javascript:のリンクは取り除きます。 - GitHub Flavored Markdown
- 表、タスクリスト、取り消し線、自動リンク、脚注を GitHub と同じように変換します。
- スクリプト不要の数式
- 数式はブラウザがそのまま表示する MathML か、スタイルシートを読み込む KaTeX HTML として出力します。
- 見出しのアンカー
- 見出しに
id="インストール"のような GitHub と同じ形式の id を付け、各節に直接リンクできます。 - 完全なページ
- doctype、文字コード、viewport、タイトルを備え、読み手のライト／ダークモードに合わせるスタイルシートも追加できます。
プログラムで Markdown を HTML に変換する
JavaScript
このページは unified のツール群を使っています。ユーザーが書いた Markdown を変換するときは rehype-sanitize を必ず入れてください。
import rehypeSanitize from "rehype-sanitize";
import rehypeStringify from "rehype-stringify";
import remarkGfm from "remark-gfm";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import { unified } from "unified";
const file = await unified()
.use(remarkParse)
.use(remarkGfm)
.use(remarkRehype)
.use(rehypeSanitize)
.use(rehypeStringify)
.process("# Hello, *world*!");
console.log(String(file)); // <h1>Hello, <em>world</em>!</h1>
Python
Python-Markdown は文字列をそのまま変換でき、拡張機能で表、フェンスコードブロック、脚注に対応します。
import markdown
html = markdown.markdown(text, extensions=["tables", "fenced_code", "footnotes"])
Pandoc
-f gfm は GitHub Flavored Markdown として読み込む指定です。1 つ目のコマンドは HTML の一部を、2 つ目は完全なページを書き出します。
pandoc README.md -f gfm -o README.html
pandoc README.md -f gfm -s --metadata title="README" -o README.html
よくある質問
MarkdownをHTMLに変換するには？
上の欄にMarkdownを貼り付け、右側のHTMLをコピーするか
.html ファイルとして保存します。変換はブラウザ内で行われます。出力したHTMLはそのままサイトに載せても安全ですか？
安全です。書式のタグは残し、コードを実行できるもの（
<script>、<iframe>、onclick などのイベント属性、javascript: のリンク）は取り除きます。自分のサイトでユーザーが書いた Markdown を変換する場合も、rehype-sanitize や DOMPurify などで同じように取り除いてください。サイトに貼るとスタイルが付かないのはなぜ？
HTML の一部にはスタイルが含まれないため、サイトのスタイルシートが適用されます。単独で見栄えのよいファイルが必要なら、「完全なページ」を選んでスタイルをオンにします。
数式はどう変換されますか？
MathML を選ぶと、数式は
<math> 要素になり、現在のブラウザはスクリプトやスタイルシートなしで表示できます。KaTeX HTML を選ぶと KaTeX のマークアップになり、KaTeX のスタイルシートが必要です。完全なページでは自動で読み込みます。Markdown の中に HTML を書けますか？
書けます。
<kbd>、<sup>、<mark>、<details>、width 付きの <img> などはそのまま残り、コードを実行できるタグは取り除かれます。Markdown と HTML の違いは？
Markdown は書きやすく読みやすいプレーンテキストの記法で、たとえば
<strong>太字</strong> の代わりに **太字** と書きます。HTML はブラウザが表示するマークアップで、Markdown は Web ページに表示される前に HTML に変換されます。GitHub Flavored Markdown に対応していますか？
対応しています。表、タスクリスト、取り消し線、自動リンク、脚注を変換できます。「コードの色分け」をオンにするとコードブロックに highlight.js のクラスが付くので、サイト側で highlight.js のテーマを読み込んでください。
関連ツール
- Markdown PDF 変換文字を選択でき、数式・色分けされたコード・ページ番号を保った PDF を保存。
- Markdown Word 変換見出し・表・数式を保った、編集できる .docx をダウンロード。
- Markdown リッチテキスト変換Googleドキュメント、Word、メールに書式付きで貼り付けられるテキストをコピー。
- Markdown テキスト変換#、**、バッククォートを取り除き、リスト・リンク・表は読みやすいまま残す。
- Markdown LaTeX 変換そのままコンパイルできる .tex ファイルを出力。Overleaf でも開けます。
- Markdown Slack 変換メッセージ、ボット、Webhook 用に Slack の mrkdwn へ変換。