chore(docs): Modify Extension Docs (#2918)

Co-authored-by: Aaron Solomon <aaron.solomon@capitalone.com>
This commit is contained in:
aaronsolomon98 2023-08-05 02:36:17 -04:00 committed by GitHub
parent 0b98cd735c
commit f4834ca08f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

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