kakakakakku blog

Weekly Tech Blog : Keep on Learning 👍

Markdown を HTML に変換するライブラリ「Showdown」を試した

最近 Markdown で書かれたシンプルなドキュメント(見出し / リスト / コードブロックなど)を HTML に変換する必要があり,Markdown を HTML に変換するライブラリ「Showdown」を試した.今までは「Pandoc」を使う機会が多かったので,他のライブラリを試したかったという背景もあった.

github.com

サクッと 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 に変換できた.

f:id:kakku22:20181029233236p:plain

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 も公開されているので,独自の変換ルールを実装して拡張することもできそう.

github.com

github.com

github.com

まとめ

  • Markdown を HTML に変換するライブラリ「Showdown」を試した
  • Showdown CLI を使えば,ターミナルから変換ができる
  • Showdown Extension を使うと独自の変換ルールを実装できる
  • 次は Netlify 連携を試してみたいと思う