地方在住IT系ニート

Hioke

remarkプラグインのメモ

Table of Contents

remark

GitHub

Markdownを扱うためのプロセッサでmdastという構文木を使用します。 remarkには下記のプラグインがあります。

  • remark-parser: Markdown to mdast
  • remark-stringify: mdast to Markdown

remarkで処理した例です。

INPUT.md
## remark
Markdownを扱うためのプロセッサでmdastという構文木を使用します。
tmp.js
const fileContents = fs.readFileSync(fullPath, 'utf8')
const processedContent = await remark()
    .process(fileContents);
console.log(processedContent.toString())
OUTPUT.md
## remark
Markdownを扱うためのプロセッサでmdastという構文木を使用します。

remark-html

GitHub

MarkdownをHTMLに変換するプラグインです。

INPUT.md
## remark
Markdownを扱うためのプロセッサでmdastという構文木を使用します。
tmp.js
const fileContents = fs.readFileSync(fullPath, 'utf8')
const processedContent = await remark()
    .use(html, { sanitize: false })
    .process(fileContents);
console.log(processedContent.toString())
OUT.html
<h2>remark</h2>
<p>Markdownを扱うためのプロセッサでmdastという構文木を使用します。

remark-gfm

GitHub

GFM (autolink literals, footnotes, strikethrough, tables, tasklists)を扱うことができるプラグインです。 テーブルの形成に役立っています。

remark-code-titles

GitHub

Markdownで記載したコード部分にタイトルをつけるプラグインです。

remark-oembed

GitHub

YouTubeのURLを貼るだけで、iframeで動画を埋め込むことや画像を埋め込むことができます。

remark-toc

GitHub

heading要素を使って自動的に目次を作成してくれます。 ただ、これだけではリンクでheading部分に飛べないため、remark-slugを併用します。

INPUT.md
## Table of Contents
## remark
Markdownを扱うためのプロセッサでmdastという構文木を使用します。
tmp.js
const fileContents = fs.readFileSync(fullPath, 'utf8')
const processedContent = await remark()
    .use(toc)
    .process(fileContents);
console.log(processedContent.toString())
OUTPUT.md
## Table of Contents

*   [remark](#remark)

## remark
Markdownを扱うためのプロセッサでmdastという構文木を使用します。

remark-slug

GitHub

heading部分にidを割り当ててくれるプラグインです。 現在は使用を推奨されていないようです。 詳細はGitHubを参照ください。

にほんブログ村 IT技術ブログ IT技術メモへ