pandoc で Markdown → HTML 変換

Pandoc を使って Markdown を HTML に変換する
cat input.md | pandoc \
--mathjax \
--css=/css/main.css \
--lua-filter="md2html_filter.lua" \
--toc --toc-depth=2 \
--template="pandoc_article_tmpl.html" \
-M title="ブログタイトル" \
--standalone \
-o "output.html"
--template
オプションでテンプレートを指定可能
たとえば pandoc_article_tmpl.html
のようなテンプレートを使えば、見た目を自由にカスタマイズできます。
--lua-filter
で細かい制御も可能
以下は、h2
レベルの見出しごとに
<section>
タグで囲む Lua
フィルターの例です。
local in_section = false
function Header(el)
if el.level == 2 then
local blocks = {}
-- 現在のセクションを閉じる
if in_section then
table.insert(blocks, pandoc.RawBlock("html", "</section>"))
end
-- 新しいセクションを開く
table.insert(blocks, pandoc.RawBlock("html", "<section>"))
table.insert(blocks, el) -- h2 見出しを追加
in_section = true
return blocks
end
end
function Para(el)
local all_images = true
for _, item in ipairs(el.content) do
if item.t ~= "Image" and item.t ~= "Space" and item.t ~= "SoftBreak" and item.t ~= "LineBreak" then
all_images = false
break
end
end
if all_images then
-- class="img-only" を持つ <div> に置き換える
return pandoc.Div(el.content, pandoc.Attr("", { "img-only" }))
end
end
function Pandoc(doc)
local blocks = doc.blocks
-- 最後のセクションを閉じる
if in_section then
table.insert(blocks, pandoc.RawBlock("html", "</section>"))
end
return pandoc.Pandoc(blocks, doc.meta)
end
return {
{ Header = Header },
{ Para = Para },
{ Pandoc = Pandoc }
}
実はこのブログ自体も pandoc で作られています。Markdown を HTML に変換して、静的サイトとして公開しています。
pandocへluaフィルターを渡すと、Header
やPara
関数が呼び出されます。エレメント情報が渡されるので、それらを加工して返せば既存の動きを変ることができます。
function Header(el)
print("el.level:", el.level)
print("el.tag:", el.t) -- タグの種類(たとえば "Header")
print("el.content:", el.content) -- 中身(インライン要素の配列)
print("el.identifier:", el.identifier)
print("el.classes:", el.classes)
print("el.attributes:", el.attributes)
end
Pandocで使える Markdown 拡張記法
Pandocがあまりに便利すぎて。。いったいPandocで使えるMarkdown記法にどんなものがあるのと興味を持ちました。 慣れ親しんでいるMarkdownはできるだけ省略し、いわゆる拡張記法って言うんですか?Pandocで使える便利な記述方法を以下に記します。
詳しくはPandoc公式ドキュメント Pandoc Markdown Guide で確認できます。
div 囲み枠(カスタムブロック)
::: warning
コメントコメントコメント :::
コメントコメントコメント
::: tip
コメントコメントコメント :::
コメントコメントコメント
::: note
コメントコメントコメント :::
コメントコメントコメント
::: caution
コメントコメントコメント :::
コメントコメントコメント
::: important
コメントコメントコメント :::
コメントコメントコメント
カラフルな色付けができてなんて便利なんだと思うかもしれないが、
種明かしをすれば、この記法は単純に
div class
に展開されるだけだ。 つまり
::: [クラス名]
が
<div class="クラス名">
に変換されるのである。当然、色付け・デザインはcssで調整する必要がある。
::: my-class`div` になります。
このブロックは :::
Span
次の記法ではspanが適応される。
[This is a span]{.class} のような表現が可能。 文章の途中に
文章の途中に This is a span のような表現をする際に便利かも。
リスト
箇条書きリスト
- アイテム1
- ネストアイテム
- アイテム2
- アイテム1
- ネストアイテム
- アイテム2
番号付きリスト
1. 項目1
2. 項目2
- 項目1
- 項目2
リンク
[リンク](https://example.com)
この記法で リンク aタグ付きの自動リンクされますが、次のようなプレーンURLの場合は自動リンクされません。
https://example.com
その場合はURLを <
と >
で囲むと自動リンクできます。
<https://example.com>
画像

コードブロック
```lua
print("Hello, Lua!")
```
またはインデントを使う:
print("Hello, Lua!")
引用
> これは引用です。
これは引用です。
表(table
)
| 見出し1 | 見出し2 |
|---------|---------|
| データ1 | データ2 |
| データ3 | データ4 |
見出し1 | 見出し2 |
---|---|
データ1 | データ2 |
データ3 | データ4 |
| Right | Left | Default | Center |
|------:|:-----|---------|:------:|
| 12 | 12 | 12 | 12 |
| 123 | 123 | 123 | 123 |
| 1 | 1 | 1 | 1 |
Right | Left | Default | Center |
---|---|---|---|
12 | 12 | 12 | 12 |
123 | 123 | 123 | 123 |
1 | 1 | 1 | 1 |
複雑なテーブルも可能。
+---------------------+-----------------------+| Location | Temperature 1961-1990 |
| | in degree Celsius |
| +-------+-------+-------+
| | min | mean | max |
==+=======+=======+=======+
+===================| Antarctica | -89.2 | N/A | 19.8 |
+---------------------+-------+-------+-------+| Earth | -89.2 | 14 | 56.7 |
+---------------------+-------+-------+-------+
Location | Temperature 1961-1990 in degree Celsius | ||
---|---|---|---|
min | mean | max | |
Antarctica | -89.2 | N/A | 19.8 |
Earth | -89.2 | 14 | 56.7 |
脚注
[^1]。
これは脚注の例
[^1]: ここに脚注の説明を書く
これは脚注の例1。
数学表記(LaTeX)
インライン数式
これは $E=mc^2$ の例です。
これは \(E=mc^2\) の例です。
ブロック数式
$$
E = mc^2 $$
\[ E = mc^2 \]
$$f(t) = \sum_{n=1}^{\infty}{-1}^{(n+1)}\frac{1}{(2n-1)^{2}}{\sin (2n-1)t }\tag{28}$$
\[f(t) = \sum_{n=1}^{\infty}{-1}^{(n+1)}\frac{1}{(2n-1)^{2}}{\sin (2n-1)t }\tag{28}\]
定義リスト
用語1
: 定義1
用語2 : 定義2
- 用語1
- 定義1
- 用語2
- 定義2
タスクリスト
- [ ] 未完了タスク
- [x] 完了タスク
コメント(出力されない)
<!-- これはコメント -->
メタデータ(yaml記法)
---
title: "タイトル"
author: "著者名"
date: "2025-03-27"
---
ここに脚注の説明を書く↩︎