chore(docs): Modify Extension Docs (#2918)
Co-authored-by: Aaron Solomon <aaron.solomon@capitalone.com>
This commit is contained in:
parent
0b98cd735c
commit
f4834ca08f
@ -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.
|
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.
|
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.
|
||||||
|
|
||||||
***
|
***
|
||||||
|
|
||||||
@ -100,6 +100,18 @@ console.log(marked.parse('# heading+'));
|
|||||||
heading+
|
heading+
|
||||||
</h1>
|
</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
|
### Block-level renderer methods
|
||||||
|
|
||||||
@ -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>
|
<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>
|
</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
|
``` js
|
||||||
const descriptionList = {
|
const descriptionList = {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user