marked/docs/USING_PRO.md

136 lines
2.9 KiB
Markdown
Raw Normal View History

2018-02-25 21:37:11 +00:00
## Extending Marked
2018-02-25 21:01:22 +00:00
2018-02-25 21:37:11 +00:00
To champion the single-reponsibility and open/closed prinicples, we have tried to make it relatively painless to extend marked. If you are looking to add custom functionality, this is the place to start.
2018-02-25 21:01:22 +00:00
2018-02-25 21:37:11 +00:00
<ul>
<li><a href="#renderer">The renderer</a></li>
<li><a href="#lexer">The lexer</a></li>
<li><a href="#parser">The parser</a></li>
</ul>
2018-02-25 21:01:22 +00:00
2018-02-26 02:56:00 +00:00
<h2 id="renderer">The renderer</h2>
2018-02-25 21:01:22 +00:00
2018-02-25 21:37:11 +00:00
The renderer is...
**Example:** Overriding default heading token by adding an embedded anchor tag like on GitHub.
```js
// Create reference instance
var myMarked = require('marked');
// Get reference
var renderer = new myMarked.Renderer();
// Override function
2018-02-25 21:01:22 +00:00
renderer.heading = function (text, level) {
var escapedText = text.toLowerCase().replace(/[^\w]+/g, '-');
2018-02-25 21:37:11 +00:00
return `<h${level}>
2018-02-26 03:06:18 +00:00
<a name="'${escapedText}'" class="anchor" href="#${escapedText}">
<span class="header-link"></span>
</a>
${text}
</h${level}>`;
2018-02-25 21:01:22 +00:00
};
2018-02-25 21:37:11 +00:00
// Run marked
2018-02-25 21:01:22 +00:00
console.log(marked('# heading+', { renderer: renderer }));
```
2018-02-25 21:37:11 +00:00
**Output:**
2018-02-25 21:01:22 +00:00
```html
<h1>
<a name="heading-" class="anchor" href="#heading-">
<span class="header-link"></span>
</a>
heading+
</h1>
```
2018-02-25 21:37:11 +00:00
### Block level renderer methods
2018-02-25 21:01:22 +00:00
- code(*string* code, *string* language)
- blockquote(*string* quote)
- html(*string* html)
- heading(*string* text, *number* level)
- hr()
- list(*string* body, *boolean* ordered)
- listitem(*string* text)
- paragraph(*string* text)
- table(*string* header, *string* body)
- tablerow(*string* content)
- tablecell(*string* content, *object* flags)
`flags` has the following properties:
```js
{
header: true || false,
align: 'center' || 'left' || 'right'
}
```
2018-02-25 21:37:11 +00:00
### Inline level renderer methods
2018-02-25 21:01:22 +00:00
- strong(*string* text)
- em(*string* text)
- codespan(*string* code)
- br()
- del(*string* text)
- link(*string* href, *string* title, *string* text)
- image(*string* href, *string* title, *string* text)
- text(*string* text)
2018-02-25 21:37:11 +00:00
<h2 id="lexer">The lexer</h2>
The lexer is...
<h2 id="parser">The parser</h2>
The parser is...
***
2018-02-25 21:01:22 +00:00
<h2 id="extend">Access to lexer and parser</h2>
You also have direct access to the lexer and parser if you so desire.
``` js
var tokens = marked.lexer(text, options);
console.log(marked.parser(tokens));
```
``` js
var lexer = new marked.Lexer(options);
var tokens = lexer.lex(text);
console.log(tokens);
console.log(lexer.rules);
```
### Pro level
You also have direct access to the lexer and parser if you so desire.
``` js
var tokens = marked.lexer(text, options);
console.log(marked.parser(tokens));
```
``` js
var lexer = new marked.Lexer(options);
var tokens = lexer.lex(text);
console.log(tokens);
console.log(lexer.rules);
```
``` bash
$ node
> require('marked').lexer('> i am using marked.')
[ { type: 'blockquote_start' },
{ type: 'paragraph',
text: 'i am using marked.' },
{ type: 'blockquote_end' },
links: {} ]
```