Markdownをhtmlで出力する方法

## はじめに
Markdownをhtmlに変換するには､**レンダラー**が必要です｡
今回は`markdown-it`というレンダラーを使ってます｡


## 準備
markdown-itをインストールします｡
```bash:markdown-itをインストール
$ npm install markdown-it

added 6 packages in 2s

1 package is looking for funding
  run `npm fund` for details
```

以下のようなフォルダ構造となります｡
```bash:
$ tree -L 1
.
├── convert.js
├── input.md
├── node_modules
├── package-lock.json
└── package.json

1 directory, 4 files
```


## 実行ファイル
以下を`convert.js`にコピペしてください｡

```javascript:convert.js
'use strict';

const 
    { promisify } = require('util'),
    path = require('path'),
    fs = require('fs'),
    readFile = promisify(fs.readFile),
    writeFile = promisify(fs.writeFile),
    md = require('markdown-it')();

async function main(input,output) {
    try {
        const
            markdown = await readFile(input, 'utf-8'),
            html = md.render(markdown); // HTMLになったmarkdownを格納
        await writeFile(output, html);
    } catch (e) {
        console.error('file error', e);
    } 
}

const
    args = process.argv.slice(2), // コマンドラインの引数を格納
    input = path.resolve(__dirname, args[0]), // 1つ目の引数の絶対パスを格納
    output = path.resolve(__dirname, args[1]); // 2つ目の引数の絶対パスを格納


main(input, output);
```


## htmlに変換する
input.mdは以下のようになっているとします｡
```md:Markdownの例文
# マイプロフィール

## 基本情報
- 名前: **yusu79**
- 性別: 男性

## スキルセット
- プログラミング言語:
  - JavaScript
- フレームワーク:
  - Node.js
- データベース:
  - MySQL

## 興味・趣味
- 機械学習
- 自然言語処理
- ゲーム開発

以上が私のプロフィールです。よろしくお願いします！
```
この状態で､`node convert.js input.md output.html`とすれば､同じフォルダ内にoutput.htmlが生成されます｡
```bash:Markdownをhtmlに変換して出力
$ node convert.js input.md output.html
```
```html:output.html
<h1>マイプロフィール</h1>
<h2>基本情報</h2>
<ul>
<li>名前: <strong>yusu79</strong></li>
<li>性別: 男性</li>
</ul>
<h2>スキルセット</h2>
<ul>
<li>プログラミング言語:
<ul>
<li>JavaScript</li>
</ul>
</li>
<li>フレームワーク:
<ul>
<li>Node.js</li>
</ul>
</li>
<li>データベース:
<ul>
<li>MySQL</li>
</ul>
</li>
</ul>
<h2>興味・趣味</h2>
<ul>
<li>機械学習</li>
<li>自然言語処理</li>
<li>ゲーム開発</li>
</ul>
<p>以上が私のプロフィールです。よろしくお願いします！</p>
```


## プラグインを導入してみる
markdown-itはプラグインを利用できます｡
大抵`markdown-it-〇〇`という形で`npm`に公開されているので､それをインストールすると良いです｡

ここでは､`%文字%{色}`とすると文字をその色に変更できる「[yusu79/markdown-it-mojicolor](https://l.pg1x.com/sggo)」を導入してみます｡

```bash:markdown-it-mojicolorをインストール
$ npm install markdown-it-mojicolor

added 1 package, and audited 8 packages in 3s

1 package is looking for funding
  run `npm fund` for details

found 0 vulnerabilities
```
`convert.js`に`plugin = require(プラグイン)`を追記し､`md.use(plugin)`とするだけでプラグインを読み込めます｡
```javascript:プラグインを追記
'use strict';

const 
    { promisify } = require('util'),
    path = require('path'),
    fs = require('fs'),
    readFile = promisify(fs.readFile),
    writeFile = promisify(fs.writeFile),
    md = require('markdown-it')(),
    plugin = require('markdown-it-mojicolor'); // 新たにmarkdown-it-mojicolorを読み込む

md.use(plugin) // markdown-itにプラグインを読み込ませる

async function main(input,output) {
    try {
        const
            markdown = await readFile(input, 'utf-8'),
            html = md.render(markdown);
        await writeFile(output, html);
    } catch (e) {
        console.error('file error', e);
    } 
}

const
    args = process.argv.slice(2),
    input = path.resolve(__dirname, args[0]),
    output = path.resolve(__dirname, args[1]);


main(input, output);
```

結果は以下の通り｡


```md:input.md
好きな飲み物は%カフェオレ%{カフェオレ}です｡
趣味は%野球観戦%{緑}です｡
休日は%プール%{rgb(0,255,255)}に行く予定です｡
```
```html:output.html
<p>好きな飲み物は<span style="color: #946c45;">カフェオレ</span>です｡
趣味は<span style="color: #3eb370;">野球観戦</span>です｡
休日は<span style="color: rgb(0,255,255);">プール</span>に行く予定です｡</p>
```


## GitHub
- [markdown-it/markdown-it: Markdown parser, done right. 100% CommonMark support, extensions, syntax plugins & high speed](https://l.pg1x.com/G6nd)
- [yusu79/markdown-it-mojicolor: Markdownの文字色を変更可能にするmarkdown-itプラグイン](https://l.pg1x.com/sggo)