Strapdown.js makes it embarrassingly simple to create elegant Markdown documents. No server-side compilation required.

https://strapdownjs.com/
https://github.com/arturadib/strapdown

A Markdown parser that uses Marked to convert Markdown in .html files to HTML.
Marked is used for this conversion.

Marked

It differs from other Marked parsers in that it applies the Bootstrap and Bootswatch theme.

Bootstrap
Bootswatch

If you want to build and publish a decent website, you should now use a static site generator.
There is a Bootswatch theme in MkDocs.

MkDocs
https://github.com/mkdocs/mkdocs-bootswatch

🎈 Strapdown.js | ふうせん🎈 FU-SEN - 🗾 日本語情報


Table of Contents


Original Strapdown.js

The original Strapdown.js is based on Bootstrap 2. This also applies to the Bootswatch theme:

https://bootswatch.com/2/

Also, use the JavaScript code prettifier to color the code. It has already been archived:

https://github.com/googlearchive/code-prettify

<html>
<title>Strapdown.js Sample</title>
<xmp>
You include **Markdown** in this.
</xmp>
<script src="https://strapdownjs.com/v/0.2/strapdown.js"></script>
</html>

take this a little further:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Strapdown.js Sample</title>
  <meta name="description" content="Strapdown.js Sample" />
</head>
<body>
<textarea theme="simplex">
You can use `<textarea>` instead of `<xmp>`.
</textarea>
<script src="https://strapdownjs.com/v/0.2/strapdown.js"></script>
</body>
</html>

The original source has style="display:none;", but this can be omitted.
This will give you a different display temporarily, but you will hardly notice it.

You may need to add <meta charset="utf-8" /> if you use it in non-English.
Some web services add this in the HTTP header and may not need it.

You can add any tag inside the <head> as needed.
Custom CSS should be put under strapdown.js. It is before </body>.
When you put it in <head> as you are used to, some of it doesn’t work.

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

Additional features and forks

Strapdown.js got a lot of attention and gave birth to some additional features and derivations:

https://github.com/joedf/strapdown-topbar
https://github.com/ndossougbe/strapdown
https://github.com/chaitin/strapdown-zeta
https://github.com/Naereen/StrapDown.js


My fork version

🎈 https://github.com/fu-sen/strapdown

I wanted to use a Bootstrap 4-based Yeti theme. That was the trigger for the fork.
It sticks to changing the Bootstrap theme without adding any features.
I ended up with versions from Bootstrap 2 to 5 themes version.


CDN

🎈 https://github.com/fu-sen/strapdown.js

Thanks to jsDelivr we can use Strapdown.js on our CDN.