はじめに
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>