Markdownをhtmlで出力する方法 #JavaScript

はじめに

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

準備

markdown-itをインストールします｡

markdown-itをインストール

$ npm install markdown-it

added 6 packages in 2s

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

以下のようなフォルダ構造となります｡

$ tree -L 1
.
├── convert.js
├── input.md
├── node_modules
├── package-lock.json
└── package.json

1 directory, 4 files

実行ファイル

以下をconvert.jsにコピペしてください｡

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は以下のようになっているとします｡

Markdownの例文

# マイプロフィール

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

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

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

以上が私のプロフィールです。よろしくお願いします！

この状態で､node convert.js input.md output.htmlとすれば､同じフォルダ内にoutput.htmlが生成されます｡

Markdownをhtmlに変換して出力

$ node convert.js input.md output.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」を導入してみます｡

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)とするだけでプラグインを読み込めます｡

プラグインを追記

'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);

結果は以下の通り｡

input.md

好きな飲み物は%カフェオレ%{カフェオレ}です｡
趣味は%野球観戦%{緑}です｡
休日は%プール%{rgb(0,255,255)}に行く予定です｡

output.html

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

Markdownをhtmlで出力する方法

はじめに

準備

実行ファイル

htmlに変換する

プラグインを導入してみる

GitHub