メモ

Markdown 記法を HTML に変換する marked でインラインで扱う場合 p タグが余計に入るのが困るときの対応メモ

Posted on by seigo

Markdown 記法を HTML に変換する marked でインラインで扱う場合 p タグが余計に入るのが困るときの対応メモです。

Node.js で Markdown 記法を HTML に変換する marked ライブラリがとても便利で自分のプロジェクトでもよく使っています。

Marked Documentation

ドキュメントも充実していて分かりやすいです。

marked.parse で簡単に変換できる

const { marked } = require('marked');

const html = marked.parse('# Header1\n\ntexttexttexttexttexttext');

// <h1 id="header1">Header1</h1>
// <p>texttexttexttexttexttext</p>
console.log(html);

使い方としては、marked.parse で Markdown 記法のテキスト渡せば、うまく変換してくれます。

marked.parse で p タグが余計に囲われる

Markdown で書かれた複数行にわたる文章の場合は、今回の marked.parse でブロック要素として扱うので良いです。

ですが、私の用途の場合、複数行でなく 1 行の要素（インライン要素）で Markdown 記法を HTML に変換したいときに p タグで囲われることで余計な段落要素が入って装飾面で妙な余白ができて困ることがあります。

const { marked } = require('marked');

const html = marked.parse('1行で表現したいテキスト https://www.1ft-seabass.jp/memo/');

// <p>1行で表現したいテキスト <a href="https://www.1ft-seabass.jp/memo/">https://www.1ft-seabass.jp/memo/</a></p>
console.log(html);

こんなかんじですね。

出力後の HTML で p タグを消すという荒業もあるんですが、もっとスマートにいきたい。

インライン要素で使う場合は marked.parseInline を使う

色々調べたりドキュメントを読んでいたらインライン要素で使う場合は marked.parseInline を使えばよいことが分かりました。

const { marked } = require('marked');

const html = marked.parseInline('1行で表現したいテキスト https://www.1ft-seabass.jp/memo/');

// 1行で表現したいテキスト <a href="https://www.1ft-seabass.jp/memo/">https://www.1ft-seabass.jp/memo/</a>
console.log(html);

うん、これで p タグが入らないで 1 行で扱えますね！

実は Surpress wrapping in <p> tag. · Issue #395 · markedjs/marked で parseInline ではないんですけど、インライン関連で言及があってヒントになって、ドキュメントから探せました。

seigo