Skip to content

Commit

Permalink
chore(docs): Modify Extension Docs (#2918)
Browse files Browse the repository at this point in the history
Co-authored-by: Aaron Solomon <aaron.solomon@capitalone.com>
  • Loading branch information
aaronsolomon98 and Aaron Solomon committed Aug 5, 2023
1 parent 0b98cd7 commit f4834ca
Showing 1 changed file with 14 additions and 2 deletions.
16 changes: 14 additions & 2 deletions docs/USING_PRO.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ Before building your custom extensions, it is important to understand the compon
4) The `parser` traverses the token tree and feeds each token into the appropriate `renderer`, and concatenates their outputs into the final HTML result.
5) Each `renderer` receives a token and manipulates its contents to generate a segment of HTML.

Marked provides methods for directly overriding the `renderer` and `tokenizer` for any existing token type, as well as inserting additional custom `renderer` and `tokenizer` functions to handle entirely custom syntax.
Marked provides methods for directly overriding the `renderer` and `tokenizer` for any existing token type, as well as inserting additional custom `renderer` and `tokenizer` functions to handle entirely custom syntax. For example, using `marked.use({renderer})` would modify a render, whereas `marked.use({extenstions: [{renderer}]})` would add a new renderer. See the [custom extensions example](#custom-extensions-example) for insight on how to execute this.

***

Expand Down Expand Up @@ -100,6 +100,18 @@ console.log(marked.parse('# heading+'));
heading+
</h1>
```
**Note:** Calling `marked.use()` in the following way will avoid overriding the `heading` token output but create a new renderer in the process.

```js
marked.use({
extensions: [{
name: 'heading',
renderer(token) {
return /* ... */
}
}]
})
```

### Block-level renderer methods

Expand Down Expand Up @@ -441,7 +453,7 @@ The renderer function has access to the parser in the `this` object, which can b
<dd>An array of strings that match the names of any token parameters that should be traversed by the <code>walkTokens</code> functions. For instance, if you want to use a second custom parameter to contain child tokens in addition to <code>tokens</code>, it could be listed here. If <code>childTokens</code> is provided, the <code>tokens</code> array will not be walked by default unless it is also included in the <code>childTokens</code> array.</dd>
</dl>

**Example:** Add a custom syntax to generate `<dl>` description lists.
**Example:** <a name="custom-extensions-example"></a>Add a custom syntax to generate `<dl>` description lists.

``` js
const descriptionList = {
Expand Down

1 comment on commit f4834ca

@vercel
Copy link

@vercel vercel bot commented on f4834ca Aug 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.