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

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

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

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

## 概要
- 簡単なコマンドで、MarkdownファイルをHTML化することができるCLIツール。

- [showdown.js](https://github.com/showdownjs/showdown)というJavaScriptライブラリを利用しており、他にもクライアント版やサーバーサイド版としても利用できる。

- [公式サイト](http://showdownjs.com/)

- [公式デモページ](http://demo.showdownjs.com/)

- [ドキュメント](https://github.com/showdownjs/showdown/wiki/CLI-tool)

## 特徴

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

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

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

### 優れた拡張機能

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

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

<img width="986" alt="test.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/c74b1259-8ffe-5838-4f7c-fdd6c631f29f.png">

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/c6d25361-8458-0c7f-8c3f-702f28b85609.png)

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

<img width="727" alt="sample.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/2ac15f8a-fe81-19b5-d9aa-64a95afd3a0a.png">



## 環境
- Amazon Linux 2

- Node.js v10.16.0

- npm 6.9.0

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

## インストール

- showdownのインストールは、Nodejsのnpm可能なため、未導入の場合は、下記を参考にインストールする。

    - [MacでのNode.jsインストール](https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09)

    - [WindowsでのNode.jsインストール](https://qiita.com/maecho/items/ae71da38c88418b806ff)

    - [LinuxでのNode.jsインストール](https://www.sejuku.net/blog/72545#LinuxOS)

    - [Amazon LinuxでNode.jsインストール](https://blog.katsubemakito.net/nodejs/install_amazonlinux)

- Node.jsのインストール後、下記のコマンドをうち、バージョン確認をする。

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

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

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

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

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

## 基本操作

### 標準変換

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

```bash
# 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のテーブルや打ち消し線等の様々な表現記法は、標準では対応していないため、利用に応じてオプションを指定する必要がある。
    - 利用可能が表示オプションは[こちら](https://github.com/showdownjs/showdown#valid-options)を確認。
- 下記の例では、「テーブル記法・タスク記法」に対応したオプションでの変換コマンドを見ていく。
- まず、変換対象Markdownファイルを下記の内容にする。

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

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

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

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

```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ファイルを指定する。<br>名前は任意。|
|`-u 文字コード`|文字コードの指定<br>例 : `-u UTF8`|
|`-a`|変換後、データとしてコマンド上に出力|

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

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

## 概要

- test

## 特徴

- test
```

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

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