More than 5 years have passed since last update.

【CLIツール探訪①】コマンド一発で、簡単にMarkdownファイルをHTMLへ変換できる「Showdown CLI」を試用。

Posted at 2019-07-28

CLIの恩恵を更に浴びるべく、ひたすら魅惑のツールを追い求める記事第一弾。
「~した気になれる」という言葉を重要視した結果、「ターミナル専任利用」という極めて月並の行動を、堂々と実施。
今回は、Markdownファイルを簡単なコマンドでHTML化できる「Showdown CLI」を試用していくことにしよう。

概要

簡単なコマンドで、MarkdownファイルをHTML化することができるCLIツール。
showdown.jsというJavaScriptライブラリを利用しており、他にもクライアント版やサーバーサイド版としても利用できる。
公式サイト
公式デモページ
ドキュメント

特徴

コマンドでのHTML化

クライアント版やサーバーサイド版と違い、jsファイルを利用せず、変換作業がターミナル上で完結する。

豊富なオプション

Markdownでの様々な記法を、豊富なオプションをコマンドへ指定するだけで、HTML記法へ対応してくれる。
※標準で対応しているわけではなく、テーブルや打ち消し線等の記法をした場合、逐次オプションを指定していく。

優れた拡張機能

標準機能の他にも、「TwitterやYoutubeのリンクに対応した機能」等の、より便利な拡張機能が多くある。

結果

下記のように、コマンドに対象ファイルと作成ファイルを指定するだけで、簡単にHTMLへの変換作業を行ってくれる。

変換後のファイルは下記。

様々なMarkdown記法も、オプションを指定するだけで、対応可能。

環境

Amazon Linux 2
Node.js v10.16.0
npm 6.9.0
※Node.js環境が利用できれば、MacやWindowsでも可能。

インストール

showdownのインストールは、Nodejsのnpm可能なため、未導入の場合は、下記を参考にインストールする。
Node.jsのインストール後、下記のコマンドをうち、バージョン確認をする。

# Node.jsのバージョン確認
$ node -v

# npmのバージョン確認
$ npm -v

確認後、下記のコマンドをうち、「Showdown CLI」のインストールを行う。

# Showdownのインストール
$ sudo npm install showdown -g

# バージョン確認
$ showdown -v

基本操作

標準変換

MarkdownファイルからHTMLへ標準機能で変換する場合は下記のコマンドをうつ。

# showdown -i 対象Markdownファイル -o 対象HTMLファイル(名前は任意)
$ showdown makehtml -i test.md -o test.html

# 下記のようなメッセージが表示されたら完了。
...
Reading data from file...
Parsing markdown...
Writing data to file...


DONE!

表示オプション利用

Markdownのテーブルや打ち消し線等の様々な表現記法は、標準では対応していないため、利用に応じてオプションを指定する必要がある。
- 利用可能が表示オプションはこちらを確認。
下記の例では、「テーブル記法・タスク記法」に対応したオプションでの変換コマンドを見ていく。
まず、変換対象Markdownファイルを下記の内容にする。

samle.md

## テーブル 
            
|名前|内容| 
|:---:|:---:|
|aaa|bbb|   
|ccc|ddd|   
|eee|fff|   
            
# タスク一覧
            
- [x] タスク1
- [x] タスク2
- [] タスク3
- [] タスク4

記述後、下記のコマンドをうち、「テーブル・タスク」オプションでの変換を行う。

# showdown makehtml -i 対象ファイル -o 変換ファイル --オプション
$ showdown makehtml -i sample.md -o sample.html --tasklists --tables

変換後、作成されたHTMLファイルが下記の内容になっていることを確認。

<h2 id="">テーブル</h2>
<table>
<thead>
<tr>
<th style="text-align:center;">名前</th>
<th style="text-align:center;">内容</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center;">aaa</td>
<td style="text-align:center;">bbb</td>
</tr>
<tr>
<td style="text-align:center;">ccc</td>
<td style="text-align:center;">ddd</td>
</tr>
<tr>
<td style="text-align:center;">eee</td>
<td style="text-align:center;">fff</td>
</tr>
</tbody>
</table>
<h1 id="-1">タスク一覧</h1>
<ul>
<li class="task-list-item" style="list-style-type: none;"><input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;" checked> タスク1</li>
<li class="task-list-item" style="list-style-type: none;"><input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;" checked> タスク2</li>
<li class="task-list-item" style="list-style-type: none;"><input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;"> タスク3</li>
<li class="task-list-item" style="list-style-type: none;"><input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;"> タスク4</li>
</ul>

その他オプション利用

変換コマンドで扱えるオプション一覧は下記。

オプション	内容
`-i 入力(変換対象)ファイル`	変換するMarkdownファイルを指定する
`-o 出力(作成)ファイル`	作成するHTMLファイルを指定する。名前は任意。
`-u 文字コード`	文字コードの指定例 : `-u UTF8`
`-a`	変換後、データとしてコマンド上に出力

CSS

標準での変換では、スタイルは適用されず、白黒の内容になってしまうため、CSSを適用する場合、下記のようにして、Markdownファイルへstyelを定義する。

<style>
body {
  background-color: #99cc00;
}
h2 {
  font-size: 20px;
}
</style>

## 概要

- test

## 特徴

- test

まとめ

今回はHTML化ということで、ツールの高機能さと同時に、HTMLの多様な記法の数々に、心酔しながら記事を書く。
利用する機能によってオプションを一つ一つ指定することは、長文コマンドをこよなく愛する私としては、歓喜。
これからの様々なCLIツールとの出会いを、ひたすら長時間妄想後、調査に入る。

参考

https://kakakakakku.hatenablog.com/entry/2018/10/30/083041
→こちらの記事を参考にいたしました。大変お世話になりました。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up