最近 Markdown で書かれたシンプルなドキュメント(見出し / リスト / コードブロックなど)を HTML に変換する必要があり,Markdown を HTML に変換するライブラリ「Showdown」を試した.今までは「Pandoc」を使う機会が多かったので,他のライブラリを試したかったという背景もあった.
サクッと Showdown の挙動を確認する場合は Showdown Live Editor を見てみると良いかと.
Showdown CLI とは?
CLI で Markdown を HTML に変換する場合,Showdown CLI を使う.オプションは以下から選べる.
-i/--input
- Markdown ファイル名を指定する
- 標準入力もサポートしている
-o/--output
- HTML ファイル名を指定する
- 標準出力もサポートしている
-u/--encoding
- エンコードを指定する
-a/--append
- 追記するときに指定する(どういうときに使うんだろう?)
-e/--extensions
- 拡張ライブラリを指定する
詳細は Wiki に載っている.
Showdown CLI 実行
インストールは npm を使う.
$ npm install showdown -g $ showdown -v 1.8.7
次に Markdown を用意する.「`3個」を入れ子にすると表示が崩れるため,Markdown 内部の「`3個」の先頭に本来不要な半角スペースを入れている.
# Sample This is **Showdown** sample ! ## List & Link - A1 - A1-1 - A1-2 - A1-3 - B1 - B1-1 - B1-2 - B1-2-1 - B1-2-2 - B1-2-3 - [kakakakakku blog](https://kakakakakku.hatenablog.com/) ## Code Block ``` package main import ( "fmt" ) func main() { fmt.Println("Hello, playground") } ``` ## Image ![Twitter](https://pbs.twimg.com/profile_images/604918632460656640/FdOmiWZW_400x400.png =200x200)
そして showdown makehtml
を実行する.
$ showdown makehtml -i kakakakakku.md -o kakakakakku.html Enabling option ghCodeBlocks Enabling option encodeEmails ... Reading data from file... Parsing markdown... Writing data to file... DONE!
HTML に変換できた.
CSS を適用する
Showdown では,基本的にシンプルな HTML に変換されるので,CSS などは適用されない.ただし GitHub を見ていたら,Markdown に style タグを書けば,多少はワークアラウンドができることがわかった.あくまで Markdown に style タグを書くだけなので,複雑なスタイルを書くと可読性が下がりそう.例えば,以下のように書ける.
<style> h1 { color: red; } </style> # Sample This is **Showdown** sample !
サーバサイドで Markdown を HTML に変換する
GitHub の README.md
を読んでいると,Showdown の強みはクライアントサイドでもサーバサイドでも Markdown を HTML に変換できるところにありそうだった.実際に Node.js でサンプルコードを動かしてみた.ウェブサービスの実装で Showdown を使うこともできそう.
var showdown = require('showdown'), converter = new showdown.Converter(), text = '# hello, markdown!', html = converter.makeHtml(text); console.log(html);
実行すると HTML に変換できた.
$ node sample.js <h1 id="hellomarkdown">hello, markdown!</h1>
Showdown Extension
Wiki を読んでいると,Showdown Extension という拡張機能があり,公式には Twitter Extension と YouTube Extension が公開されていた.簡単に言うと「特定の文言を変換する機能」で,例えば Twitter Extension だと @username
と書くだけで <a href="http://twitter.com/username">@username</a>
に変換できるようになる.また Showdown Extension Boilerplate も公開されているので,独自の変換ルールを実装して拡張することもできそう.
まとめ
- Markdown を HTML に変換するライブラリ「Showdown」を試した
- Showdown CLI を使えば,ターミナルから変換ができる
- Showdown Extension を使うと独自の変換ルールを実装できる
- 次は Netlify 連携を試してみたいと思う