Posted at

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


  • CLIの恩恵を更に浴びるべく、ひたすら魅惑のツールを追い求める記事第一弾。


  • 「~した気になれる」という言葉を重要視した結果、「ターミナル専任利用」という極めて月並の行動を、堂々と実施。


  • 今回は、Markdownファイルを簡単なコマンドでHTML化できる「Showdown CLI」を試用していくことにしよう。



概要


特徴


コマンドでのHTML化


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


豊富なオプション


  • Markdownでの様々な記法を、豊富なオプションをコマンドへ指定するだけで、HTML記法へ対応してくれる。


  • 標準で対応しているわけではなく、テーブルや打ち消し線等の記法をした場合、逐次オプションを指定していく。



優れた拡張機能


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


結果


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

test.png


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

image.png


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

sample.png


環境


  • Amazon Linux 2


  • Node.js v10.16.0


  • npm 6.9.0


  • Node.js環境が利用できれば、MacやWindowsでも可能。



インストール

# 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ツールとの出会いを、ひたすら長時間妄想後、調査に入る。


参考