静的サイトジェネレータでは Markdown で制作し、
ビルドで HTML に変換させますが、
ビルド作業なく変換させる手段も存在しています。
JavaScript を用いて Web ブラウザ側で処理します。
Markdown パーサ とも言われます。


こんな記事を見ていたのです。IchigoJam つながりの福野さんの記事。

ここでは……

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.1.1/marked.min.js"></script>
<script>
const md = function(html) {
  const div = document.createElement("div")
  div.innerHTML = marked(html)
  document.body.appendChild(div)
}
</script>
</head>
<body>
<script>
md(`
# h1
## h2
### h3
#### h4
##### h5
###### h6
`)</script>
</body>
</html>

というように md 内に囲ってあるのですが、 ` で囲まれてあるので、
``` を使う事ができませんでした。

それなら特定タグの中に入れれば良いんですよね。
noscript タグだと非表示になりますが、クローラーは収集してくれるでしょう。
という事で……

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.1.1/marked.min.js"></script>
<body>
<div id="html"></div>
<noscript id="markdown">
# h1
## h2
### h3
#### h4
##### h5
###### h6
</noscript>
<script>
document.getElementById("html").innerHTML = marked(document.getElementById("markdown").innerHTML);
</script>
</body>
</html>

こんな感じなります。

Marked での表示結果

ここでは Marked を使っているのですが、(よく使われています)

他にもあるような気がして、GitHub を検索してみると結構見つかりました!
その中で CDN が用意されているなど、直接 URL を入れて使用できるものを
いくつかまとめてみました。


本日これを投稿したのは、
そのうちの zero-md で 2.0.0 が公開されたのです。

専用にタグが定義されていて、よりシンプルに記載できます。

<html>
<head>
<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/zero-md.min.js"></script>
</head>
<body>
<zero-md>
<script type="text/markdown">
# h1
## h2
### h3
#### h4
##### h5
###### h6
</script>
</zero-md>
</body>
</html>

専用タグで記載する上に head 内は HTML などで必要な title なども入れられるので、
クローラーで収集される前提でも良さそうです。

zero-md での表示結果


より便利に感じたのは Strapdown.js ですね。

デフォルトで Bootstrap themes を適用させます。

<html>
<head>
<title>Strapdown.js</title>
</head>
<body>
<xmp theme="united" style="display:none;">
# h1
## h2
### h3
#### h4
##### h5
###### h6
</xmp>
<script src="http://strapdownjs.com/v/0.2/strapdown.js"></script>
</body>
</html>

Markdown を記載するだけで、CSS を細かくいじる事なく、
すばやくテーマ付の Web サイトを公開できるわけです。
テーマの変更はタグのオプションで容易に行えます。

Strapdown.js での表示結果

長期で公開されているようで、派生もいくつか生まれていますよ。
メニューを付けたりするとか、テーマが増えているとか、……


一方注意点もあります。

JavaScript での処理という事は、
パソコンやスマートフォンで表示している Web ブラウザ側で変換します。
検索エンジンのクローラーは
この変換前の HTML ファイルをそのまま参照し、処理する事になるのです。

例えば README.md を表示したい場合、
zero-md v2 だとこのように記載できるのですが……

<html>
<head>
<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/[email protected]/dist/zero-md.min.js"></script>
</head>
<body>
<zero-md src="/README.md"></zero-md>
</body>

ここにはテキスト本体がなく、タグしかありません。
クローラーはこれを参照して「全く文章がない」と判断してしまいます。
検索結果にも期待した検索結果にでてこなくなる可能性がある事に注意が必要です。

なので、.html ファイルの中に Markdown を入れるようにすれば、
Markdown の変換はされなくても文章があるので、クローラーは読んでくれそうです。
という事で md2html.pages.net.eu.org はそのようにしています。

Google 検索 site:md2html.pages.net.eu.org

Google の検索結果。
この中では Markdown のタグが専用タグだったり、noscript だったり、
CSS display:none; 付きだったりといろいろなのですが、
現状ではその記載により排除されている事はなさそうな気がします。
(記事段階で、公開して間がないので、収集されていないページがあります)

しかし、見出しなどは無視されているので、頭文がそのまま出ていて、
静的サイトジェネレータに比べると結果としてはいまいちそうです。
検索結果(いわゆる SEO)の事を考えると
静的サイトジェネレータで完全な HTML にした方が今は良さそうですね。

例えば GitHub Pages は Jekyll が採用されていて、
.html の代わりに直接 .md ファイルを用いて Markdown を記載できます。
Jekyll テーマを適用する事もあります。 git push するだけです。

Hugo などの自動ビルドを採用するところも増えてきており、
ますます Markdown で記載して、HTML で公開する手段も増えてきています。


自分は Hugo をメインに扱うようになってきていますが、
数ページの作成であれば、このような JavaScript を用いた
Markdown パーサを用いる方法も試しつつあります。


Markdown についてはこちらもどうぞ。