情報アイランド

「情報を制する者は世界を制す」をモットーに様々な情報を提供することを目指すブログです。現在はプログラミング関連情報が多めですが、投資関連情報も取り扱っていきたいです。

Node.jsでShowdownを使ったMarkdown→HTML変換を行う

MarkdownドキュメントをHTMLドキュメントに変換するには下のようなモジュールを利用する方法があります。

  • markdown
  • marked
  • showdown
  • markdown-it

この記事ではshowdownモジュールを利用する方法を取り上げます。

変換

まず、showdown.Converterクラスのインスタンスを作成します。

var showdown = require('showdown');

var converter = new showdown.Converter({
    omitExtraWLInCodeBlocks: 'false', 
    noHeaderId: 'false', 
    prefixHeaderId: 'false', 
    parseImgDimensions: 'false', 
    headerLevelStart: '1', 
    simplifiedAutoLink: 'false', 
    literalMidWordUnderscores: 'false', 
    strikethrough: 'false', 
    tables: 'false', 
    tablesHeaderId: 'false', 
    ghCodeBlocks: 'true', 
    tasklists: 'false'
});

第1引数にオプションを指定します。この引数は指定しなくても構いません。

主なオプションには下のようなものがあります。

  • omitExtraWLInCodeBlocks・・・コードブロックの末尾に改行がある場合にその改行を除去するかを真偽値として指定します。デフォルトはfalseです。
  • noHeaderId・・・ヘッダ(h1タグ、h2タグ・・・)に自動的にid属性を付加しないかを真偽値として指定します。デフォルトはfalseです。
  • prefixHeaderId・・・ヘッダのid属性の値の先頭に付加する文字列を指定します。falseを指定した場合には文字列を付加しません。trueを指定した場合にはsectionが付加されます。デフォルトはfalseです。
  • parseImgDimensions・・・画像サイズの記法を使えるようにするかを真偽値として指定します。デフォルトはfalseです。
  • headerLevelStart・・・ヘッダのレベルの開始値を整数として指定します。デフォルトは1です。
  • simplifiedAutoLink・・・GitHub flavored markdownの自動リンクの記法を使えるようにするかを真偽値として指定します。デフォルトはfalseです。
  • literalMidWordUnderscores・・・__による強調の記法を使えないようにするかを真偽値として指定します。デフォルトはfalseです。
  • strikethrough・・・取り消し線の記法を使えるようにするかを真偽値として指定します。デフォルトはfalseです。
  • tables・・・テーブルの記法を使えるようにするかを真偽値として指定します。デフォルトはfalseです。
  • tablesHeaderId・・・thタグに自動的にid属性を付加するかを真偽値として指定します。デフォルトはfalseです。
  • ghCodeBlocks・・・GitHub flavored markdownのコードブロックの記法を使えるようにするかを真偽値として指定します。デフォルトはtrueです。
  • tasklists・・・GitHub flavored markdownのタスクリストの記法を使えるようにするかを真偽値として指定します。デフォルトはfalseです。

showdown.Converterクラスのインスタンスが得られたらshowdown.Converter.makeHtml関数を呼び出します。

var hdoc = converter.makeHtml('xxx');

第1引数にMarkdownドキュメントを指定します。

返り値としてHTMLドキュメントが得られます。

なお、返り値として得られるHTMLドキュメントの改行コードは\nであるため、場合によっては自分で\r\nに変換しなければならないかもしれません。

サンプルコード1

3つ目のコマンドライン引数として与えられたファイルを読み込み、Markdownドキュメントとしてパースし、HTMLドキュメントに変換し、整形し、4つ目のコマンドライン引数として与えられたファイルに書き込みます。

HTMLドキュメントを整形する方法に関しては下の記事を参照してください。

なお、文字コードがUTF-8のテキストファイルを読み込むとテキストの先頭にBOM(バイトオーダーマーク)が付加されていることがあるため、下のプログラムではstripBom関数を使用してBOMを取り除いています。

stripBom関数に関しては下の記事を参照してください。

showdown.js

var fs = require('fs');
var stripBom = require('strip-bom');
var showdown = require('showdown');
var html = require('html');

if (process.argv.length < 4) {
    console.error('lack argument.');
    process.exit(1);
}

fs.readFile(process.argv[2], 'utf-8', function (err, mdoc) {
    if (err) {
        console.error(err);
        process.exit(1);
    }
    else {
        var converter = new showdown.Converter();
        var hdoc = html.prettyPrint(converter.makeHtml(stripBom(mdoc)), { indent_size: 2 }).replace(new RegExp('\r\n', 'g'), '\n').replace(new RegExp('\n', 'g'), `\r\n`);
        fs.writeFile(process.argv[3], hdoc, 'utf-8', function (err) {
            if (err) {
                console.error(err);
                process.exit(1);
            }
            else {
                console.log('finished!!');
            }
        });
    }
});

使用パッケージ

  • strip-bom
    npm install strip-bomでインストールします。
  • Showdown
    npm install showdownでインストールします。
  • html prettyprinter
    npm install htmlでインストールします。

実行結果

現在のフォルダには下のような内容のdoc.mdという名称のMarkdownドキュメントが存在しています。

# 私が好きなアニメ

私が好きなアニメを紹介します。

* 対魔導学園35試験小隊
* 下ネタという概念が存在しない退屈な世界
* 城下町のダンデライオン
* 電波教師
* 魔法少女リリカルなのはViVid
* ISUCA
* DOG DAYS''
* 六畳間の侵略者!?
* 星刻の竜騎士

## 対魔導学園35試験小隊

序盤は微妙かなと思ったけど**回を進める毎に良くなっていきました**。

## 下ネタという概念が存在しない退屈な世界

このMarkdownドキュメントをHTMLドキュメントに変換してみます。

C:\work\node>node showdown.js doc.md doc.htm
finished!!

変換結果は下のようになりました。

<h1 id="">私が好きなアニメ</h1>

<p>私が好きなアニメを紹介します。</p>
<ul>
  <li>対魔導学園35試験小隊</li>
  <li>下ネタという概念が存在しない退屈な世界</li>
  <li>城下町のダンデライオン</li>
  <li>電波教師</li>
  <li>魔法少女リリカルなのはViVid</li>
  <li>ISUCA</li>
  <li>DOG DAYS''</li>
  <li>六畳間の侵略者!?</li>
  <li>星刻の竜騎士</li>
</ul>

<h2 id="35">対魔導学園35試験小隊</h2>

<p>序盤は微妙かなと思ったけど<strong>回を進める毎に良くなっていきました</strong>。</p>

<h2 id="-1">下ネタという概念が存在しない退屈な世界</h2>

関連

pizyumi
プログラミング歴19年のベテランプログラマー。業務システム全般何でも作れます。現在はWeb系の技術を勉強中。
スポンサーリンク

-Node.js