Browse Source

Added renderer doc and example

pull/24/head
Vitaly Puzrin 10 years ago
parent
commit
9146d46bab
  1. 47
      docs/architecture.md

47
docs/architecture.md

@ -102,7 +102,50 @@ simple - it should be clear from your ticket, that you studied docs, sources,
and tryed to do something yourself. We never reject with help to real developpers. and tryed to do something yourself. We never reject with help to real developpers.
## Parse process ## Renderer
After token stream is generated, it's passed to [renderer](https://github.com/markdown-it/markdown-it/blob/master/lib/renderer.js).
It just plays all tokens, passing each to rule with the same name as token type.
Randerer rules are located in `md.renderer.rules[name]` and are simple functions
with the same signature:
```js
function (tokens, idx, options, env, self) {
//...
return htmlResult;
}
```
In many cases that allows easy output change even without parser intrusion.
For example, let's replace images with vimeo links to player's iframe:
```js
var md = require('markdown-it')();
var defaultRender = md.renderer.image,
vimeoRE = /^https?:\/\/(www\.)?vimeo.com\/(\d+)($|\/)/;
md.renderer.image = function (tokens, idx, options, env, self) {
var id;
if (vimeoRE.test(tokens[idx].href)) {
id = tokens[idx].href.match(vimeoRE)[2];
return '<div class="embed-responsive embed-responsive-16by9">\n' +
' <iframe class="embed-responsive-item" src="//player.vimeo.com/video/' + id + '"></iframe>\n' +
'</div>\n';
}
return defaultRender(tokens, idx, options, env, self);
});
```
You also can write your own renderer to generate AST for example.
## Summary
This was mentioned in [Data flow](#data-flow), but let's repeat sequence again: This was mentioned in [Data flow](#data-flow), but let's repeat sequence again:
@ -116,3 +159,5 @@ of each chain can be seen on the top of
[parser_block.js](https://github.com/markdown-it/markdown-it/blob/master/lib/parser_block.js) and [parser_block.js](https://github.com/markdown-it/markdown-it/blob/master/lib/parser_block.js) and
[parser_inline.js](https://github.com/markdown-it/markdown-it/blob/master/lib/parser_inline.js) [parser_inline.js](https://github.com/markdown-it/markdown-it/blob/master/lib/parser_inline.js)
files. files.
Also you can change output directly in [renderer](https://github.com/markdown-it/markdown-it/blob/master/lib/renderer.js) for many simple cases.

Loading…
Cancel
Save