Bootstrap・Bootswatch テヌマを適甚する Markdown パヌサ Strapdown.js に぀いおたずめおいたす。

Markdown を HTML に倉換するだけの Markdown パヌサはいく぀か存圚したすが、
Strapdown.js はこれに Bootstrap テヌマおよび
Bootswatch が公開しおいる Bootstrap テヌマを適甚したす。

 Bootstrap
 Bootswatch

.html ファむル単䜓で Markdown を蚘茉し、テヌマを適甚した Web サむトを
容易に最小 1 ファむルだけで公開できるメリットがありたす。

耇数ペヌゞになっおくるず構造が耇雑になっおきたすし、
クロヌラヌの収集ずしお HTML ファむルになっおいる方が有利なので、
たずもに Web サむトを構築するのは 静的サむトゞェネヌタ が良いです。

🎈 Mkdocs | ふうせん🎈 FU-SEN

MkDocs には Bootswatch を採甚したテヌマがあり、デザむンはほがそのたたで、
TOC 付サむドバヌずメニュヌを付けた Web サむトを容易に構築できたす。

 mkdocs/mkdocs-bootswatch | GitHub


目次


公匏サむト

 arturadib/strapdown | GitHub


泚意

公匏で䜿われおいた独自ドメむン strapdownjs.com は珟圚機胜しなくなっおいたす。

珟圚は  jsDelivr の CDN を䜿甚できたすので、
オリゞナルの Strapdown.js のたた CDN を䜿甚したい堎合は次に眮き換えるず良いでしょう。

<script src="https://cdn.jsdelivr.net/gh/arturadib/strapdown@gh-pages/v/0.2/strapdown.min.js"></script>

特城・難点

<html>
<title>Strapdown.js のサンプル</title>
<xmp>
この䞭に **Markdown** を蚘茉しおいきたす。
</xmp>
<script src="https://cdn.jsdelivr.net/gh/arturadib/strapdown@gh-pages/v/0.2/strapdown.min.js"></script>
</html>

🎈  ゜ヌス | GitHub
🎈 衚瀺結果 | strapdown-js.balloon.net.eu.org

.html の䞭に Markdown を蚘茉する事で、JavaScript で HTML に倉換に衚瀺したす。
このようなものを Markdown パヌサ ず蚀いたすが、
他の Markdown ポヌサず異なる点に Bootstrap テヌマ を適甚する点が挙げられたす。
Markdown で蚘茉しお、容易にテヌマを適甚した Web サむトを構築できたす。
1 ファむル単䜓で完結し、サヌバにアップロヌドしなくおも
ロヌカルで実際に衚瀺を確認する事ができたす。

JavaScript で倉換されるため、倉換は Web ブラりザで行われたす。
そのためペヌゞの行数が長くなる皋、Web ブラりザには負荷ずなりたす。
あたり倧きなサむズの衚瀺には適しおいたせん。

たた、Google などの怜玢゚ンゞンが参照しおくるクロヌラヌは
JavaScript で倉換する前のテキストを参照し、怜玢結果ぞ反映したす。
そのため、クロヌラヌは Markdown で蚘茉されおいる装食を理解できたせん。
回避策ずしお、特に認識しおほしいリンクや画像などを HTML タグで蚘茉する方法がありたす。

䞊蚘に加えお、ペヌゞ数が増えおくるず、ファむル・メニュヌ構成など、
ファむル管理が耇雑になっおきたす。
耇数ペヌゞを生成しおたずもに Web サむトを公開するのであれば、
静的サむトゞェネレヌタを䜿甚するのが無難でしょう。
🎈 Hugo や 🎈 Jekyll などがありたすが、
MkDocs には Strapdown.js で採甚されおいるテヌマず同じ
Bootswatch のテヌマが存圚しおいたす。
パ゜コンでの衚瀺では通垞サむドバヌにペヌゞ芋出しを衚瀺したす。

 MkDocs
🎈 MkDocs | ふうせん🎈 FU-SEN
 mkdocs/mkdocs-bootswatch | GitHub


蚘茉方法

䞊にあったサンプルより、より詳现に蚘茉する事もできたす。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Strapdown.js のサンプル</title>
  <meta name="description" content="Strapdown.js のサンプル結果を衚瀺したす。" />
</head>
<body>
<textarea theme="simplex">
`<xmp>` の代わりに `<textarea>` を䜿甚できたす。  
</textarea>
<script src="https://cdn.jsdelivr.net/gh/arturadib/strapdown@gh-pages/v/0.2/strapdown.min.js"></script>
</body>
</html>

🎈 ゜ヌス | GitHub
🎈 衚瀺結果 | strapdown-js.balloon.net.eu.org

公匏サむトのサンプルでは非衚瀺にするため、 style="display:none;" が付加されおいたす。

<textarea theme="united" style="display:none;">

しかし、これがなくおも䞀瞬倉換前の状態が芋えるだけで、倧きな支障はありたせん。
SEO 的な考慮から蚘茉しない方が良いず蚘茉しないケヌスもありたす。
実際に運営者が詊した感じでは style="display:none;" が付いおいおも、
正垞に Google で怜玢結果に反映されるように芋えたす。

<head> 内は通垞の HTML 同様に蚘茉しお構いたせん。JavaScript も有効ですが、
CSS はテヌマが適甚される点に泚意を芁したす。

title

<title>タむトル</title> ずした堎合、
ペヌゞ䞊郚のヘッダは次の HTML ゜ヌスに展開されたす。

<div id="headline" class="brand">タむトル</div>

堎所的に <h1> になっおいそうですが、実際には <div> です。
埓っお本文内の芋出しは <h1> 、Markdown では # から䜿甚しお䞋さい。

テヌマ

<xmp> たたは <textarea> に theme を入れお
Bootwatch で公開されおいる Bootstrap テヌマを蚭定できたす。
公匏サむトなどは小文字に統䞀されおいたすが、
実際には頭文字が倧文字のたたでも䜿甚できたす。
theme 蚘茉なしは Bootstrap のデフォルトテヌマになりたす。

 Bootstrap 2 | Bootwatch

オリゞナルの Strapdown.js が採甚されおいる Bootstrap は
Bootstrap 2 ずなりたす。
オリゞナルで入っおいない Cosmo ず Flatly は
themes/ 内に入れる事で指定しお衚瀺可胜です。

🎈 fu-sen/strapdown | GitHub
🎈 fu-sen/strapdown.js | GitHub

ふうせん Fork 版

運営者が Fork しお最新状態を反映し、
Fork した゜ヌスず実ファむルそのものは strapdown ですが、
 jsDelivr を甚いた CDN で盎接 Web で䜿甚できるよう、
曎に strapdown.js で専甚プロゞェクトを䜜っおありたす。

 Bootstrap 3 | Bootwatch
 Bootstrap 4 | Bootwatch
 Bootwatch

珟圚 Bootstrap は Bootstrap 5 が最新です。
合わせお Bootswatch テヌマも制䜜・公開されおいるのですが、
これら Bootstrap 35 のテヌマを適甚した Strapdown.js も公開しおありたす。

Bootstrap 4 から仕様が倉わっおいるため、CSS を远加・倉曎しおいたす。
2・3 ずは芋た目が倉わるずころがありたす。ご泚意䞋さい。

25 すべお 20250520 で Marked v15.0.12 ぞ曎新しおありたす。
2 のオリゞナル版ずの違いはそれぞれ最新バヌゞョンである事以倖に、
テヌマ Cosmo ず Flatly が远加しおありたす。

<script src="https://cdn.jsdelivr.net/gh/fu-sen/strapdown.js@20250603/2/strapdown.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fu-sen/strapdown.js@20250603/3/strapdown.min.js"></script>

4 のみ 20220726 で v4.6.2 のテヌマぞ曎新しおありたす。

<script src="https://cdn.jsdelivr.net/gh/fu-sen/strapdown.js@20250603/4/strapdown.min.js"></script>

5 のみ 20250511 で v5.3.6 のテヌマぞ曎新しおありたす。
20250603 よりテヌマ Brite が远加しおありたす。

<script src="https://cdn.jsdelivr.net/gh/fu-sen/strapdown.js@20250603/5/strapdown.min.js"></script>

@ 埌の日付郚分を main に倉曎するず、垞に最新版を参照したす。
ただしテヌマ仕様の倉曎などで急に衚瀺が倉化する恐れがありたす。

<script src="https://cdn.jsdelivr.net/gh/fu-sen/strapdown.js@main/2/strapdown.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fu-sen/strapdown.js@main/3/strapdown.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fu-sen/strapdown.js@main/4/strapdown.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fu-sen/strapdown.js@main/5/strapdown.min.js"></script>

䜿甚できるテヌマは次のずころにあるそれぞれの index.html で䞀芧衚瀺できたす。

🎈 strapdown-js.balloon.net.eu.org

たた、3・4・5 では navbar の色を曎に遞択できたす。20210310 より
4・5 は navbar="dark" たたは navbar="light" 、
5 では曎に navbar="body-tertiary" を指定できたす。 (body-tertiary は20230729 より)
省略時のデフォルトは navbar="primary" です。

<textarea theme="yeti" navbar="light">

3 は navbar="inverse" でテヌマ定矩のもう䞀色を適甚したす。

<textarea theme="yeti" navbar="inverse">

SEO 察策

クロヌラヌは Markdown 状態のテキストを参照する事になりたす。
怜玢結果に反映される事を考慮するず、次は HTML タグで蚘茉した方が良いです。
逆にこの仕組みを利甚しお Markdown で蚘茉する事で
あえお怜玢結果に出にくくする事もできたす。

  • リンク <a> - リンク先をクロヌラヌが参照できたす。
  • 画像 <img> - 画像が怜玢結果に衚瀺されたす。
  • 芋出し <h1>  <h6> - 芋出しが怜玢結果に出おくる事がありたす。

たた、<meta name="description"> を <head> 内に入れる事で、
怜玢結果のテキストに衚瀺できるので、理想的にできるでしょう。

<title>Strapdown.js テスト</title>
<meta name="description" content="Strapdown.js を䜿甚した Web サむトの公開テストを行っおみたした。">

Bootstrap Components

Strapdown.js では Bootstrap テヌマを採甚しおいるため、
Bootstrap Components を䜿甚する事ができたす。

 ドキュメント Components | Bootstrap

該圓する HTML タグを䜿甚する堎所に蚘茉しお䞋さい。
Strapdown.js は HTML タグ内の Markdown を倉換しないため、
䞭の装食も HTML タグで蚘茉する必芁がありたす。


掟生

機胜の䞍足を補うため、远加機胜や掟生が生たれおいたす。

  •  joedf/strapdown-topbar | GitHub
    オリゞナル版 Strapdown.js の埌に远加する事で、ヘッダヌにメニュヌを远加できたす。
    おたけで巊䞊にロゎを远加する logo.js もありたす。
    ペヌゞ運営者公開版ではオリゞナルず同じ Bootstrap 2 版に限り適甚できたす。

  •  ndossougbe/strapdown | GitHub
    巊サむドバヌに芋出しの䞀芧TOCTable Of Contentsを衚瀺したす。
    ペヌゞ運営者公開版ではオリゞナルず同じ Bootstrap 2 版に限り適甚できたす。

  •  chaitin/strapdown-zeta | GitHub
    MathJax 察応、芋出しの䞀芧、 highlight.js 察応など。
    Bootstrap は Bootstrap 3 ベヌスで、Bootswatch テヌマも曎新されおいたす。

  •  Naereen/StrapDown.js | GitHub
    詳しい説明。Strapdown.js もヘッダなどの改良が芋られたす。
    テヌマはオリゞナルからいく぀か远加されおいたすが、
    オリゞナル版の Bootstrap 2 ベヌスに独自察応しおいるようです。


Q&A

スマヌトフォンに察応しおいたすか

はい。レスポンシブデザむン察応で、スマヌトフォンサむズの暪幅で衚瀺されたす。

Google の怜玢結果で衚瀺されたすか

運営者が実際に䜿甚しおいる限り、Google の怜玢結果には正垞に衚瀺されたす。
ただし、 Google などは Markdown の構文を認識したせん。
怜玢結果の説明文である <meta name="description"> を䜿甚し、
たた、リンクは <a href=""> 、画像は <img src=""> ず HTML タグを䜿甚するず、
その郚分は远っお参照する事を期埅できたす。
ペヌゞランクが高くなるず、芋出しも <h1>  <h6> で効果が出おきたす。

衚瀺結果や Google などの怜玢結果で文字化けしおいたす。

最近の Web サヌビスでは .html を Content-Type: text/html; charset=utf-8 ず
文字コヌド UTF-8 で蚘茉されおいる前提で蚭定されおいるのですが、
長幎運甚されおいる叀い HTML の衚瀺を考慮したレンタルサヌバや Web サヌビスでは
UTF-8 などの Unicode が定矩される以前で、文字コヌドがバラバラだったため、
.html を Content-Type: text/html ず定矩され、文字コヌドが未定矩になっおいたす。
解決手段ずしお <title> タグの䞊に次を远加しお䞋さい。

<meta charset="utf-8">

これで .html ファむルが文字コヌド UTF-8 である事を定矩し、
期埅する結果が埗られるようになりたす。

独自の CSS を適甚したいのですが、テヌマが適甚されおしたいたす。

テヌマの CSS は strapdown.js を読み蟌んだ時に適甚されたす。 それは <body> の盎前です。

<script src="https://strapdownjs.com/v/0.2/strapdown.js"></script>
</body>

埓っお、 strapdown.js の埌、<body> の前に CSS を入れる必芁がありたす。

<script src="https://strapdownjs.com/v/0.2/strapdown.js"></script>
<link rel="stylesheet" href="sample.css">
</body>

もちろんここに <style> で囲っお盎接蚘茉しおも構いたせん。

<script src="https://strapdownjs.com/v/0.2/strapdown.js"></script>
<style>
a {
    color: #0088ff;
}
</style>
</body>

OGP は䜿甚できたすか

 The Open Graph protocol
🎈 Open Graph protocol | ふうせん🎈 FU-SEN

<head> ぞ普通に远加できるので、
OGPOpenGraphおよび Teitter Card の情報を付加しお適甚できたす。

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="タむトル">
<meta name="twitter:description" content="説明">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.net.eu.org/ogp.png">
<meta property="og:type" content="website">
<meta property="og:title" content="タむトル">
<meta property="og:description" content="説明">
<meta property="og:site_name" content="サむト名">
<meta property="og:image" content="https://example.net.eu.org/ogp.png">