Skip to content

Commit 407af18

Browse files
committed
Add improved docs
1 parent deffd14 commit 407af18

File tree

1 file changed

+142
-67
lines changed

1 file changed

+142
-67
lines changed

readme.md

Lines changed: 142 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -8,32 +8,70 @@
88
[![Backers][backers-badge]][collective]
99
[![Chat][chat-badge]][chat]
1010

11-
**[mdast][]** utility to parse markdown.
11+
**[mdast][]** utility that turns a syntax tree into markdown.
1212

13-
## When to use this
13+
## Contents
1414

15-
Use this if you have direct access to an AST and need to serialize it.
16-
Use **[remark][]** instead, which includes this, but has a nice interface and
17-
hundreds of plugins.
15+
* [What is this?](#what-is-this)
16+
* [When should I use this?](#when-should-i-use-this)
17+
* [Install](#install)
18+
* [Use](#use)
19+
* [API](#api)
20+
* [`toMarkdown(tree[, options])`](#tomarkdowntree-options)
21+
* [List of extensions](#list-of-extensions)
22+
* [Syntax](#syntax)
23+
* [Syntax tree](#syntax-tree)
24+
* [Types](#types)
25+
* [Security](#security)
26+
* [Related](#related)
27+
* [Contribute](#contribute)
28+
* [License](#license)
1829

19-
## Install
30+
## What is this?
31+
32+
This package is a utility that takes an [mdast][] syntax tree as input and turns
33+
it into serialized markdown.
34+
35+
This utility is a low level project.
36+
It’s used in [`remark-stringify`][remark-stringify], which focusses on making it
37+
easier to transform content by abstracting these internals away.
38+
39+
## When should I use this?
2040

21-
This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c):
22-
Node 12+ is needed to use it and it must be `import`ed instead of `require`d.
41+
If you want to handle syntax trees manually, use this.
42+
For an easier time processing content, use the **[remark][]** ecosystem instead.
2343

24-
[npm][]:
44+
## Install
45+
46+
This package is [ESM only][esm].
47+
In Node.js (version 12.20+, 14.14+, or 16.0+), install with [npm][]:
2548

2649
```sh
2750
npm install mdast-util-to-markdown
2851
```
2952

53+
In Deno with [Skypack][]:
54+
55+
```js
56+
import {toMarkdown} from 'https://cdn.skypack.dev/mdast-util-to-markdown@1?dts'
57+
```
58+
59+
In browsers with [Skypack][]:
60+
61+
```html
62+
<script type="module">
63+
import {toMarkdown} from 'https://cdn.skypack.dev/mdast-util-to-markdown@1?min'
64+
</script>
65+
```
66+
3067
## Use
3168

32-
Say we have the following script, `example.js`:
69+
Say our module `example.js` looks as follows:
3370

3471
```js
3572
import {toMarkdown} from 'mdast-util-to-markdown'
3673

74+
/** @type {import('mdast').Root} */
3775
const tree = {
3876
type: 'root',
3977
children: [
@@ -60,8 +98,7 @@ const tree = {
6098
console.log(toMarkdown(tree))
6199
```
62100

63-
Now, running `node example` yields (note the properly escaped characters which
64-
would otherwise turn into a list and image respectively):
101+
…now running `node example.js` yields:
65102

66103
```markdown
67104
> ***
@@ -70,14 +107,17 @@ would otherwise turn into a list and image respectively):
70107
> b \![d](example.com)
71108
```
72109

110+
> 👉 **Note**: observe the properly escaped characters which would otherwise
111+
> turn into a list and image respectively.
112+
73113
## API
74114

75115
This package exports the following identifier: `toMarkdown`.
76116
There is no default export.
77117

78118
### `toMarkdown(tree[, options])`
79119

80-
Serialize **[mdast][]** to markdown.
120+
Turn an **[mdast][]** syntax tree into markdown.
81121

82122
##### Formatting options
83123

@@ -138,48 +178,48 @@ heading as the opening sequence (`boolean`, default: `false`).
138178

139179
###### `options.emphasis`
140180

141-
Marker to use to serialize emphasis (`'*'` or `'_'`, default: `'*'`).
181+
Marker to use for emphasis (`'*'` or `'_'`, default: `'*'`).
142182

143183
###### `options.fence`
144184

145-
Marker to use to serialize fenced code (``'`'`` or `'~'`, default: ``'`'``).
185+
Marker to use for fenced code (``'`'`` or `'~'`, default: ``'`'``).
146186

147187
###### `options.fences`
148188

149189
Whether to use fenced code always (`boolean`, default: `false`).
150-
The default is to fenced code if there is a language defined, if the code is
151-
empty, or if it starts or ends in empty lines.
190+
The default is to use fenced code if there is a language defined, if the code is
191+
empty, or if it starts or ends in blank lines.
152192

153193
###### `options.incrementListMarker`
154194

155-
Whether to increment the value of bullets of items in ordered lists (`boolean`,
156-
default: `true`).
195+
Whether to increment the counter of ordered lists items (`boolean`, default:
196+
`true`).
157197

158198
###### `options.listItemIndent`
159199

160-
Whether to indent the content of list items with the size of the bullet plus one
161-
space (when `'one'`) or a tab stop (`'tab'`), or depending on the item and its
162-
parent list (`'mixed'`, uses `'one'` if the item and list are tight and `'tab'`
163-
otherwise) (`'one'`, `'tab'`, or `'mixed'`, default: `'tab'`).
200+
How to indent the content of list items (`'one'`, `'tab'`, or `'mixed'`,
201+
default: `'tab'`).
202+
Either with the size of the bullet plus one space (when `'one'`), a tab stop
203+
(`'tab'`), or depending on the item and its parent list (`'mixed'`, uses `'one'`
204+
if the item and list are tight and `'tab'` otherwise).
164205

165206
###### `options.quote`
166207

167-
Marker to use to serialize titles (`'"'` or `"'"`, default: `'"'`).
208+
Marker to use for titles (`'"'` or `"'"`, default: `'"'`).
168209

169210
###### `options.resourceLink`
170211

171-
Whether to use resource links (`[text](url)`) always (`boolean`, default:
172-
`false`).
173-
The default is to use autolinks (`<https://example.com>`) when possible.
212+
Whether to always use resource links (`boolean`, default: `false`).
213+
The default is to use autolinks (`<https://example.com>`) when possible
214+
and resource links (`[text](url)`) otherwise.
174215

175216
###### `options.rule`
176217

177218
Marker to use for thematic breaks (`'*'`, `'-'`, or `'_'`, default: `'*'`).
178219

179220
###### `options.ruleRepetition`
180221

181-
Number of markers to use for thematic breaks (`number`, default:
182-
`3`, min: `3`).
222+
Number of markers to use for thematic breaks (`number`, default: `3`, min: `3`).
183223

184224
###### `options.ruleSpaces`
185225

@@ -189,20 +229,23 @@ Whether to add spaces between markers in thematic breaks (`boolean`, default:
189229
###### `options.setext`
190230

191231
Whether to use setext headings when possible (`boolean`, default: `false`).
192-
Setext headings are not possible for headings with a rank more than 2 or when
193-
they’re empty.
232+
The default is to always use ATX headings (`# heading`) instead of setext
233+
headings (`heading\n=======`).
234+
Setext headings can’t be used for empty headings or headings with a rank of
235+
three or more.
194236

195237
###### `options.strong`
196238

197-
Marker to use to serialize strong (`'*'` or `'_'`, default: `'*'`).
239+
Marker to use for strong (`'*'` or `'_'`, default: `'*'`).
198240

199241
###### `options.tightDefinitions`
200242

201-
Whether to join definitions w/o a blank line (`boolean`, default: `false`).
202-
Shortcut for a join function like so:
243+
Whether to join definitions without a blank line (`boolean`, default: `false`).
244+
The default is to add blank lines between any flow (“block”) construct.
245+
Turning this option on is a shortcut for a join function like so:
203246

204247
```js
205-
function (left, right) {
248+
function joinTightDefinitions(left, right) {
206249
if (left.type === 'definition' && right.type === 'definition') {
207250
return 0
208251
}
@@ -211,18 +254,23 @@ function (left, right) {
211254

212255
###### `options.handlers`
213256

214-
Object mapping node types to custom handlers.
257+
Object mapping node types to custom handlers (`Record<string, Handle>`, default:
258+
`{}`).
215259
Useful for syntax extensions.
216-
Take a look at [`lib/handle`][handlers] for examples.
260+
261+
This option is a bit advanced.
262+
It’s recommended to look at the code in [`lib/handle/`][handlers] for examples.
217263

218264
###### `options.join`
219265

220-
List of functions used to determine what to place between two flow nodes.
221-
Often, they are joined by one blank line.
222-
In certain cases, it’s nicer to have them next to each other.
223-
Or, they can’t occur together.
224-
These functions receive two adjacent nodes and their parent and can return
225-
`number` or `boolean`, referring to how many blank lines to use between them.
266+
List of functions used to determine what to place between two flow nodes
267+
(`Array<Join>`, default: `[]`).
268+
269+
“Blocks” are typically joined by one blank line.
270+
Sometimes it’s nicer to have them flush next to each other, yet other times
271+
they can’t occur together at all.
272+
Join functions receive two adjacent siblings and their parent and can return
273+
`number` or `boolean`, to signal how many blank lines to use between them.
226274
A return value of `true` is as passing `1`.
227275
A return value of `false` means the nodes cannot be joined by a blank line, such
228276
as two adjacent block quotes or indented code after a list, in which case a
@@ -238,50 +286,69 @@ comment will be injected to break them up:
238286

239287
###### `options.unsafe`
240288

241-
List of patterns to escape.
289+
List of patterns to escape (`Array<Unsafe>`).
242290
Useful for syntax extensions.
243-
Take a look at [`lib/unsafe.js`][unsafe] for examples.
291+
292+
This option is quite advanced.
293+
It’s recommended to look at the code in [`lib/unsafe.js`][unsafe] for examples.
244294

245295
##### Extension options
246296

247297
###### `options.extensions`
248298

249-
List of extensions (`Array<ToMarkdownExtension>`).
299+
List of extensions (`Array<ToMarkdownExtension>`, default: `[]`).
250300
Each `ToMarkdownExtension` is an object with the same interface as `options`
251301
here.
252302

253303
##### Returns
254304

255-
`string`Serialized markdown.
305+
Serialized markdown (`string`).
256306

257307
## List of extensions
258308

259309
* [`syntax-tree/mdast-util-directive`](https://github.com/syntax-tree/mdast-util-directive)
260-
serialize directives
310+
— directives
261311
* [`syntax-tree/mdast-util-frontmatter`](https://github.com/syntax-tree/mdast-util-frontmatter)
262-
serialize frontmatter (YAML, TOML, more)
312+
— frontmatter (YAML, TOML, more)
263313
* [`syntax-tree/mdast-util-gfm`](https://github.com/syntax-tree/mdast-util-gfm)
264-
serialize GFM
314+
— GFM
265315
* [`syntax-tree/mdast-util-gfm-autolink-literal`](https://github.com/syntax-tree/mdast-util-gfm-autolink-literal)
266-
serialize GFM autolink literals
316+
— GFM autolink literals
267317
* [`syntax-tree/mdast-util-gfm-footnote`](https://github.com/syntax-tree/mdast-util-gfm-footnote)
268-
serialize GFM footnotes
318+
— GFM footnotes
269319
* [`syntax-tree/mdast-util-gfm-strikethrough`](https://github.com/syntax-tree/mdast-util-gfm-strikethrough)
270-
serialize GFM strikethrough
320+
— GFM strikethrough
271321
* [`syntax-tree/mdast-util-gfm-table`](https://github.com/syntax-tree/mdast-util-gfm-table)
272-
serialize GFM tables
322+
— GFM tables
273323
* [`syntax-tree/mdast-util-gfm-task-list-item`](https://github.com/syntax-tree/mdast-util-gfm-task-list-item)
274-
serialize GFM task list items
324+
— GFM task list items
275325
* [`syntax-tree/mdast-util-math`](https://github.com/syntax-tree/mdast-util-math)
276-
serialize math
326+
— math
277327
* [`syntax-tree/mdast-util-mdx`](https://github.com/syntax-tree/mdast-util-mdx)
278-
serialize MDX or MDX.js
328+
— MDX
279329
* [`syntax-tree/mdast-util-mdx-expression`](https://github.com/syntax-tree/mdast-util-mdx-expression)
280-
serialize MDX or MDX.js expressions
330+
— MDX expressions
281331
* [`syntax-tree/mdast-util-mdx-jsx`](https://github.com/syntax-tree/mdast-util-mdx-jsx)
282-
serialize MDX or MDX.js JSX
332+
— MDX JSX
283333
* [`syntax-tree/mdast-util-mdxjs-esm`](https://github.com/syntax-tree/mdast-util-mdxjs-esm)
284-
— serialize MDX.js ESM
334+
— MDX ESM
335+
336+
## Syntax
337+
338+
Markdown is serialized according to CommonMark but care is taken to format in
339+
such a way that the resulting markdown should work with most markdown parsers.
340+
Extensions can add support for custom syntax.
341+
342+
## Syntax tree
343+
344+
The syntax tree is [mdast][].
345+
346+
## Types
347+
348+
This package is fully typed with [TypeScript][].
349+
It exports the types `Options`, `Map`, `Unsafe`, `Join`, `Handlers`, `Handle`,
350+
`Context`, `SafeOptions`, which model the interfaces used by options and
351+
extensions.
285352

286353
## Security
287354

@@ -290,20 +357,20 @@ syntax tree, but there are several cases where that is impossible.
290357
It’ll do its best, but complete roundtripping is impossible given that any value
291358
could be injected into the tree.
292359

293-
As Markdown is sometimes used for HTML, and improper use of HTML can open you up
360+
As markdown is sometimes used for HTML, and improper use of HTML can open you up
294361
to a [cross-site scripting (XSS)][xss] attack, use of `mdast-util-to-markdown`
295362
and parsing it again later could potentially be unsafe.
296363
When parsing markdown afterwards and then going to HTML, use something like
297-
[`hast-util-sanitize`][sanitize] to make the tree safe.
364+
[`hast-util-sanitize`][hast-util-sanitize] to make the tree safe.
298365

299366
## Related
300367

301-
* [`micromark/micromark`](https://github.com/micromark/micromark)
302-
— the smallest commonmark-compliant markdown parser that exists
303-
* [`remarkjs/remark`](https://github.com/remarkjs/remark)
304-
— markdown processor powered by plugins
305368
* [`syntax-tree/mdast-util-from-markdown`](https://github.com/syntax-tree/mdast-util-from-markdown)
306369
— parse markdown to mdast
370+
* [`micromark/micromark`](https://github.com/micromark/micromark)
371+
— parse markdown
372+
* [`remarkjs/remark`](https://github.com/remarkjs/remark)
373+
— process markdown
307374

308375
## Contribute
309376

@@ -349,6 +416,8 @@ abide by its terms.
349416

350417
[npm]: https://docs.npmjs.com/cli/install
351418

419+
[skypack]: https://www.skypack.dev
420+
352421
[license]: license
353422

354423
[author]: https://wooorm.com
@@ -359,14 +428,20 @@ abide by its terms.
359428

360429
[coc]: https://github.com/syntax-tree/.github/blob/HEAD/code-of-conduct.md
361430

431+
[esm]: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
432+
433+
[typescript]: https://www.typescriptlang.org
434+
362435
[mdast]: https://github.com/syntax-tree/mdast
363436

364437
[xss]: https://en.wikipedia.org/wiki/Cross-site_scripting
365438

366-
[sanitize]: https://github.com/syntax-tree/hast-util-sanitize
439+
[hast-util-sanitize]: https://github.com/syntax-tree/hast-util-sanitize
367440

368441
[handlers]: lib/handle
369442

370443
[unsafe]: lib/unsafe.js
371444

372445
[remark]: https://github.com/remarkjs/remark
446+
447+
[remark-stringify]: https://github.com/remarkjs/remark/tree/main/packages/remark-stringify

0 commit comments

Comments
 (0)