remarkプラグインのメモ

remark

GitHub

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

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

remarkで処理した例です。

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

const fileContents = fs.readFileSync(fullPath, 'utf8')
const processedContent = await remark()
    .process(fileContents);
console.log(processedContent.toString())

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

remark-html

GitHub

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

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

const fileContents = fs.readFileSync(fullPath, 'utf8')
const processedContent = await remark()
    .use(html, { sanitize: false })
    .process(fileContents);
console.log(processedContent.toString())

<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を併用します。

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

const fileContents = fs.readFileSync(fullPath, 'utf8')
const processedContent = await remark()
    .use(toc)
    .process(fileContents);
console.log(processedContent.toString())

## Table of Contents

*   [remark](#remark)

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

remark-slug

GitHub

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