0.4.5 • Published 1 year ago

@plumbiu/md v0.4.5

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

@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>

0.4.5

1 year ago

0.4.4

1 year ago

0.4.3

1 year ago

0.4.2

1 year ago

0.4.1

1 year ago

0.4.0

1 year ago

0.3.4

1 year ago

0.3.3

1 year ago

0.3.2

1 year ago

0.3.1

1 year ago

0.3.0

1 year ago

0.2.8

1 year ago

0.2.7

1 year ago

0.2.6

1 year ago

0.2.5

1 year ago

0.2.4

1 year ago

0.2.3

1 year ago

0.2.2

1 year ago

0.2.1

1 year ago

0.2.0

1 year ago

0.1.1

1 year ago

0.1.0

1 year ago

0.0.10

1 year ago

0.0.9

1 year ago

0.0.8

1 year ago

0.0.7

1 year ago

0.0.6

1 year ago

0.0.5

1 year ago

0.0.4

1 year ago

0.0.3

1 year ago

0.0.2

1 year ago

0.0.1

1 year ago