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