文書内のMarkdown記法をHTMLとして表示するJavaScriptライブラリ「Strapdown.js」

2014/1/28 2016/5/23 ライフハック, 試してみた

Markdown文書をHTMLに整形する「Strapdown.js」で素早い情報共有を
テキストエディタで簡単にかけて、マークアップの指示も出来るので僕も非常に重宝しています。
僕自身、ブログを書くときに頻繁に使うんですよね。Markdown記法。
そんなMarkdown記法で書いたテキストをそのままHTMLファイルとして見やすく変換してくれるJavascriptライブラリが、今日ご紹介するstrapdown.jsです。

strapdown.jsは、ライブラリをHTMLファイル内で読み込むと、そのhtml内で記述されたMarkdown記法をすべてHTMLに変換して表示してくれる、というもの。
せっかくですので、試しに文書を作成してみました。

<!DOCTYPE html>
<html>
<title> はじめてのStrapdown.js</title>
<xmp theme="cerulean" style="display:none;">
# Strapdown.js

## Strapdown.jsとは

Strapdown.jsとは、HTMLの替わりにMarkdown記法で記述することでHTMLを出力できるJavascriptライブラリです。 
記述は[Markdown記法](http://ja.wikipedia.org/wiki/Markdown)を使います。 
Markdown記法が使える人は、Markdownのまま公開も出来るので、情報共有に便利ですね。

## Strapdown.jsの特徴

Strapdown.jsの特徴はいくつかあります。

* XMPタグ内のMarkdown記法をすべてHTMLに変換してくれる
* [Bootstrap](http://getbootstrap.com/2.3.2/)を自動的に読み込んでくれるの
* [Bootswatch](http://bootswatch.com/2/)のテーマも利用できる

Markdown記法に変更してくれるのはもちろんのこと、自動的にBootstrapプラグインも読み込んでくれるので装飾も比較的綺麗になります。 
また、Bootswatchと（Bootstrapのフリーテーマ配布サイト）で配布されているテーマも使えます。 
標準のBootStrapの色合いでは満足できないという場合でも、簡単に変更が出来るんですね。

---

&copy; 2014 [想造ノート](http://blog.motta.jp/) all rights reserved.

</xmp>
<script src="http://strapdownjs.com/v/0.2/strapdown.js"></script>
</html>

これをHTMLファイルとして保存すると、ブラウザではこう表示されます。
サンプルはこちらから確認できます。
Markdown記法を知っておかないといけないという大前提はありますが、それさえできれば非常に簡単にHTMLファイルを作れるstrapdown.js。
素早い情報共有に一役買ってくれそうです。
Strapdown.js – Instant and elegant Markdown documents