@plumbiu/md
TypeScript icon, indicating that this package has built-in type declarations

0.4.5 • Public • Published

@plumbiu/md

this respository is used for @plumbiu/blog as I don't want to install too many dependencies

Feature

  • lazy loading for <img />
  • Toc API

Usage

parseMd

md2html + md2toc

/*
  function parseMd(
    md: string,
    options = {
      isPython: false,
      lazy: true
    },
  ): Promise<{
    html: string
    toc: {
      level: number
      title: string
    }[]
  }>
*/
import { parseMd } from '@plumbiu/md'
await parseMd('# hello\r\nworld', {
  // if lazy option is true, img label will be <img loading="lazy" />
  lazy: true, // true by default
})

/*
{
  html: `<h1>hello</h1>
  <p>World</p>`,
  toc: [
    { title: 'hello', level: 1 }
  ]
}

*/

md2html

/*
  function md2html(md: string, options?: {
    lazy?: boolean
  }): Promise<string>
*/
import { md2html } from '@plumbiu/md'

await md2html('# hello\r\nworld', {
  // if lazy option is true, img label will be <img loading="lazy" />
  lazy: true, // true by default
})
/*
  <h1>hello</h1>
  <p>World</p>
*/

html2toc

/*
  function html2Toc(html: string, options?: {
    depth: number
  }): {
    level: number
    content: string
    hash: string
  }[]
*/

import { md2html } from '@plumbiu/md'

await md2toc('<h1 id="hello-world">hello world</h1>', {
  // WARNING: this will very slowly
  isPython: false, // default by true, if you use Python, remeber set this option to `true`
})

/*
  [
    { level: 1, content: 'hello world', hash: 'hello-world' }
  ]
*/

As this repo is used for transfrom markdown, html(at least h label) should not be nested.

HTML like this will get error output:

<div>
  <div>
    <h1>hello</h1>
  </div>
  <div>
    <h2>world</h2>
  </div>
</div>

md2toc

/* function md2toc(md: string, options?: Md2tocOpts): {
  level: number
  id: string
  content: string
}[]; */

import { md2toc } from '@plumbiu/md'

await md2toc(
  `
# hello
world
# foo bar
baz
`,
  {
    // depth mean the toc depth
    depth: 3, // 3 by default
  },
)

/*
  [
    { level: 1, content: 'hello', id: 'hello' },
    { level: 1, content: 'foo bar', id: 'foobar' },
  ]
*/

styles

@plumbiu/md offer the highliht.js and github-markdown.css style

import '@plumbiu/styles/github-markdown.css'
// for code block
import '@plumbiu/styles/hljs-markdown.css'

dark-theme needs add <html theme="dark"></html>

Package Sidebar

Install

npm i @plumbiu/md

Weekly Downloads

2

Version

0.4.5

License

MIT

Unpacked Size

437 kB

Total Files

7

Last publish

Collaborators

  • plumbiu