remark.js を試す

why

matter 周りを練習したかった

Next.js Tutorial では

nextjs.org

Markdown の rendering で

const matterResult = matter(fileContents)

  // Use remark to convert markdown into HTML string
  const processedContent = await remark()
    .use(html)
    .process(matterResult.content)
  const contentHtml = processedContent.toString()

こうして matter をかけられたデータを html として use して？

process にかけて string にしていた。

.use(html) も .process() も分かっていない。

npm 公式ドキュメント

www.npmjs.com

unified processor to parse and serialize Markdown.

Built on micromark.

Powered by plugins.

Part of the unified collective.

Markdown を 変換したり暗号化するもので、

よくわからないけど unified の一部みたい。

var remark = require('remark')
var recommended = require('remark-preset-lint-recommended')
var html = require('remark-html')
var report = require('vfile-reporter')
 
remark()
  .use(recommended)
  .use(html)
  .process('## Hello world!', function (err, file) {
    console.error(report(err || file))
    console.log(String(file))
  })

remark と recommend と remark-html と reporter を使う例が載っていた

remark

remark-preset-lint-recommended

remark-html

vfile-reporter

全て npm install しないと 使えなかった

  1:1  warning  Missing newline character at end of file  final-newline  remark-lint

⚠ 1 warning
<h2>Hello world!</h2>

実際に打ってみると、lint の Markdown の形式の警告と Markdown が html に変換された結果が帰ってきた。

しかし

  .process('## Hello world!', function (err, file) {
    console.log(String(file))
  })

ここの第二引数のコールバックがわからないので、それを別記事で調べてみる