一つの HTML ファイルで Markdown を書いてテーマを適用する。
個人ホームページ訪問 Advent Calendar 2024 - Day 5
あれ？ 個人ホームページ訪問 Advent Calendar 2024、５日目空いてるの？
んじゃ自分が急遽行ってしまいましょうね。
ここは Hugo で作って Vercel（画像は Cloudflare Pages）で公開していますが、
今日はこの辺触れません。Hugo は予定している人がいますので……
何かと Markdown 使う人も増えてきたと思います。
GitHub とか使ってる開発者が特に慣れているかとおもいますが、
日本だと Wiki を使ってた人なら、同じ感覚で使えますね。
**強調** できたり `command` とか……
強調 できたり command とか……
……という感じですね。（Hugo も通常は Markdown ですので……）
GitHub ｔかなら .md ファイルを認識して変換してくれるのですが、
ブラウザは Markdown を認識しないので、何かで変換する必要があります。
index.html を作成して、ここに Markdown を直接できたら……
やってみましょう。
<html>
<title>タイトル</title>
</head>
<body>
<xmp>
**強調** できたり `command` とか……
</xmp>
</body>
<script src="https://cdn.jsdelivr.net/gh/fu-sen/strapdown.js@main/5/strapdown.min.js"></script>
</html>
<xmp> ～ </xmp> に Markdown を入れます。<title> ～ </title> は HTML のタイトルです。
あとはそのまま入れて下さい。特に <script> ～ </scaript> ですね。
で、この index.html を表示させてみましょう。
あれ!? Markdown が変換されている！
しかもタイトルも青いヘッダに入って表示されている！
……はい。このような Markdown パーサ があるんです。 Strapdown.js というものです。
https://github.com/arturadib/strapdown
こちらがオリジナルなのですが……もう 10 年更新されてません😆
しかし、余計な事をせずに Markdown を記載して HTML で公開できるので、
けっこうフォークされた派生版が存在します。
🎈 https://github.com/fu-sen/strapdown
その一つにオイラの ふうせん派生版 もあります。
おそらく最新コミットも数日前とか数週間前になっているかと思います。
Strapdown.js で使われている Marked は現在も更新されていますし、
Bootstrap も更新されていますしね。
この最新版を反映しつつ、オリジナル仕様を極力そのまま維持しています。
先ほど青いヘッダが出てましたが、これが Bootstrap によるものです。
Bootswatch テーマにも対応しています。 <xml> タグで
<xmp theme="slate">
とテーマ名を入れるだけで……
ダークデザインの slate テーマになります。
デザインは Bootstrap や Bootswatch のテーマを適用して、
あとは Markdown で文章を作っていって、
この HTML ファイルを公開・共有するだけ！ 簡単～～～
最近のテーマだと１テーマ内でいくつかの種類が存在しているので、navbar で設定できるようにしています。
<xmp theme="lumen" navbar="light">
Bootstrap 4・5 では primary (デフォルト)・light・dark、
Bootstrap 3 は inverse でもう１種類です。
🎈 https://strapdown-js.balloon.net.eu.org/
こちらに Bootstrap の古いバージョンも含めて一覧しています。
ちなみにオリジナルの Strapdown.js は Bootstrap 2 でした。
この記事の段階で Bootstrap 5 まで更新されています。
テーマもいろいろ変わっています。
問題がない限りは最新版の Bootstrap 5 で良いです。
とりあえずこれだけ公開すれば、使える人が使えると思います。
複数ページだとヘッダーにメニューがほしいとか思うと思いますが、
そうなるとメニューの更新を複数ページで行うなど、大変になってくるので、
それなら静的サイトジェネレータを使うのが無難かと思います。
Hugo にも Strapdown テーマがあるのですが、
Strapdown.hs に近い感じだと Mkdocs が個人的におすすめです。
個人ホームページ訪問 Advent Calendar 2024
