Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.
  • 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ツールとの出会いを、ひたすら長時間妄想後、調査に入る。

参考

t_o_d
沖縄在住。 よろしくお願いいたします。
https://r-p.vercel.app/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away