|
2 | 2 | [](http://badge.fury.io/js/posthtml-render)
|
3 | 3 | [](https://travis-ci.org/voischev/posthtml-render?branch=master)
|
4 | 4 | [](https://coveralls.io/r/voischev/posthtml-render?branch=master)
|
| 5 | + |
| 6 | +Render [PostHTML](http://github.com/posthtml/posthtml) Tree to HTML/XML. |
| 7 | +More info for [PostHTMLTree](https://github.com/posthtml/posthtml#posthtml-json-tree-example) |
| 8 | + |
| 9 | +## Install |
| 10 | + |
| 11 | +[NPM](http://npmjs.com) install |
| 12 | +``` |
| 13 | +$ npm install posthtml-render |
| 14 | +``` |
| 15 | +is also available for [bower](http://bower.io) and as an AMD, CommonJS, and globals module, uncompressed and compressed. |
| 16 | + |
| 17 | + |
| 18 | +## Usage |
| 19 | + |
| 20 | +__In NodeJS__ |
| 21 | + |
| 22 | +```js |
| 23 | +var render = require('posthtml-render'); |
| 24 | +var titleObj = { tag: 'h1' }; |
| 25 | + |
| 26 | +titleObj.attrs = { class: 'heading' }; |
| 27 | +titleObj.content = ['Title']; |
| 28 | + |
| 29 | +clonsole.log(render(titleObj/*, options */)); |
| 30 | +// <h1 class="heading">Title</h1> |
| 31 | +``` |
| 32 | + |
| 33 | +__In Browser__ |
| 34 | + |
| 35 | +```html |
| 36 | +<!DOCTYPE html> |
| 37 | +<html> |
| 38 | +<head> |
| 39 | + <title>Title</title> |
| 40 | + <script type="text/javascript" src="./bower_components/posthtml-render/posthtml-render.min.js"></script> |
| 41 | + <script type="text/javascript"> |
| 42 | + window.onload = function() { |
| 43 | + document.body.innerHTML = postHTMLRender({ tag: 'h1', attrs: { style: 'color: red;' }, content: ['Title'] }); |
| 44 | + }; |
| 45 | + </script> |
| 46 | +</head> |
| 47 | +<body> |
| 48 | + |
| 49 | +</body> |
| 50 | +</html> |
| 51 | +``` |
| 52 | + |
| 53 | +## Options |
| 54 | + |
| 55 | +### singleTags |
| 56 | +Array tags for extend default list single tags |
| 57 | + |
| 58 | +__Default__: `[]` |
| 59 | + |
| 60 | +*Options* `{ singleTags: ['rect', 'custom'] }` |
| 61 | + |
| 62 | +```html |
| 63 | +... |
| 64 | +<div> |
| 65 | + ... |
| 66 | + <rect> |
| 67 | + <custom> |
| 68 | +</div> |
| 69 | +``` |
| 70 | + |
| 71 | + |
| 72 | +### closingSingleTag |
| 73 | +Option to specify version closing single tags. |
| 74 | +Accepts values: `default`, `slash`, `tag`. |
| 75 | + |
| 76 | +__Default__: `default` |
| 77 | + |
| 78 | +*Options* `{ closingSingleTag: 'default' }` |
| 79 | + |
| 80 | +```html |
| 81 | +<img> |
| 82 | +``` |
| 83 | + |
| 84 | +*Options* `{ closingSingleTag: 'slash' }` |
| 85 | + |
| 86 | +```html |
| 87 | +<img /> |
| 88 | +``` |
| 89 | + |
| 90 | +*Options* `{ closingSingleTag: 'tag' }` |
| 91 | + |
| 92 | +```html |
| 93 | +<img></img> |
| 94 | +``` |
| 95 | + |
| 96 | +## License |
| 97 | + |
| 98 | +[MIT](LICENSE) |
0 commit comments