acyort-util-md

• use remark to parse markdown
• use prismjs to highlight code
• use gatsby-remark-prismjs adapted remark and prismjs
• use prettier to format code
• use github-slugger and markdown-toc to generate toc
• use remark-container to parse ::: syntax to div.container, like vuepress/markdown-container

Usage

const { toc, parseMd, frontMatter } = require('acyort-util-md');
const md = '#heading'
const tocHTML = toc(md)
const contentHTML = parseMd(md, {
  // see https://www.gatsbyjs.org/packages/gatsby-remark-prismjs/#how-to-use
  highlightOpt: {}
})
// format yaml front-matter
const data = frontMatter(md)

Types

interface parseMdOption {
  highlightOpt?: {
    classPrefix?: string,
    aliases?: {
      [key: string]: string
    },
    showLineNumbers?: boolean,
    noInlineHighlight?: boolean,
  }
}

declare module 'acyort-util-md' {
  export function parseMd(content: string, opt?: parseMdOption): string
  export function toc(md: string): string
  export function frontMatter(
    md: string
  ): {
    [k: string]: any
  }
}

Markdown Extensions

toc and heading

use the same slug to parse html and generate toc

• autolink-headings
• heading-slug

input

# hefd A b c
## heading2

output

<!-- toc -->
<ul>
  <li>
    <a href="#hefd-a-b-c">hefd A b c</a>
    <ul>
      <li><a href="#heading2">heading2</a></li>
    </ul>
  </li>
</ul>

<!-- body -->
<h1 id="hefd-a-b-c" class="heading">
  <a href="#hefd-a-b-c" aria-hidden="true">
    <span class="icon icon-link"></span>
  </a>hefd A b c
</h1>
<h2 id="heading2" class="heading">
  <a href="#heading2" aria-hidden="true">
    <span class="icon icon-link"></span>
  </a>
  heading2
</h2>

code

• prismjs-hightlight
• Line numbering
• Line highlighting

block-container

input

::: tip
This is content
:::

output

<div class="remark-container tip">
  <p class="remark-container-title">TIP</p>
  <p>this is content</p>
</div>

front-matter

use gray-matter to format yaml

---
data1: some text
data2:
  - listItem1
  - listItem2
---