# mobiledoc-html-renderer

> Renders mobiledoc input to HTML (string) output

Latest version **0.3.1** (published 2016-11-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install mobiledoc-html-renderer
pnpm add mobiledoc-html-renderer
yarn add mobiledoc-html-renderer
bun add mobiledoc-html-renderer
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.1 |
| Published | 2016-11-15 |
| First published | 2015-07-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Cory Forsyth |
| Maintainers | bantic, mixonic |
| Keywords | mobiledoc, render, content-kit |

## Links

- npm: https://www.npmjs.com/package/mobiledoc-html-renderer
- Repository: https://github.com/bustlelabs/mobiledoc-html-renderer
- Issues: https://github.com/bustlelabs/mobiledoc-html-renderer/issues
- npm.io page: https://npm.io/package/mobiledoc-html-renderer

## Recent versions

- 0.3.1 (latest) — 2016-11-15
- 0.3.0 (next) — 2016-02-04
- 0.3.0-beta1 (beta) — 2015-12-17
- 0.3.0-beta.1 — 2016-02-02
- 0.2.1 — 2015-11-23
- 0.2.0 — 2015-11-23
- 0.1.8 — 2015-11-12
- 0.1.7 — 2015-09-01
- 0.1.6 — 2015-08-05
- 0.1.5 — 2015-07-29
- 0.1.4 — 2015-07-29
- 0.1.3 — 2015-07-27
- 0.1.2 — 2015-07-15
- 0.1.1 — 2015-07-13
- 0.1.0 — 2015-07-09

## README

## Mobiledoc HTML Renderer [![Build Status](https://travis-ci.org/bustlelabs/mobiledoc-html-renderer.svg?branch=master)](https://travis-ci.org/bustlelabs/mobiledoc-html-renderer)

**This package is deprecated and will not be updated. Please see [Rendering HTML](https://github.com/bustlelabs/mobiledoc-dom-renderer#rendering-html) on the mobiledoc-dom-renderer `README.md` for a supported path to render Mobiledoc as HTML.**

This is an HTML renderer for the [Mobiledoc format](https://github.com/bustlelabs/mobiledoc-kit/blob/master/MOBILEDOC.md) used
by [Mobiledoc-Kit](https://github.com/bustlelabs/mobiledoc-kit).

To learn more about Mobiledoc cards and renderers, see the **[Mobiledoc Cards docs](https://github.com/bustlelabs/mobiledoc-kit/blob/master/CARDS.md)**.

The renderer is a small library intended for use in servers that are building
HTML documents. It may be of limited use inside browsers as well.

### Usage

```
var mobiledoc = {
  version: "0.2.0",
  sections: [
    [         // markers
      ['B']
    ],
    [         // sections
      [1, 'P', [ // array of markups
        // markup
        [
          [0],          // open markers (by index)
          0,            // close count
          'hello world'
        ]
      ]
    ]
  ]
};
var renderer = new HTMLRenderer({cards: []});
var rendered = renderer.render(mobiledoc);
console.log(rendererd.result); // "<div><p><b>hello world</b></p></div>"
```
The Renderer constructor accepts a single object with the following optional properties:
  * `cards` [array] - The list of card objects that the renderer may encounter in the mobiledoc
  * `cardOptions` [object] - Options to pass to cards when they are rendered
  * `unknownCardHandler` [function] - Will be called when any unknown card is enountered
  * `unknownAtomHandler` [function] - Will be called when any unknown atom is enountered
  * `sectionElementRenderer` [object] - A map of hooks for section element rendering.
    * Valid keys are P, H1, H2, H3, BLOCKQUOTE, PULL-QUOTE
    * A valid value is a function that returns an element

The return value from `renderer.render(mobiledoc)` is an object with two properties:
  * `result` [string] - The rendered result
  * `teardown` [function] - When called, this function will tear down the rendered mobiledoc and call any teardown handlers that were registered by cards when they were rendered

#### sectionElementRenderer

Use this renderer option to customize what element is used when rendering
a section.

```
var renderer = new MobiledocHTMLRenderer({
  sectionElementRenderer: {
    P: function() { return document.createElement('span'); },
    H1: function() { return document.createElement('h2'); },
    H2: function() {
      var element = document.createElement('h2');
      element.setAttribute('class', 'subheadline');
      return element;
    }
    /* Valid keys are P, H1, H2, H3, BLOCKQUOTE, PULL-QUOTE */
  }
});
var rendered = renderer.render(mobiledoc);
```

### Tests

Command-line:

 * `npm test`

Or in the browser:

 * `broccoli serve`
 * visit http://localhost:4200/tests

### Releasing

* `npm version patch` or `minor` or `major`
* `npm run build`
* `git push bustle --tags`
* `npm publish`

---
_Source: https://npm.io/package/mobiledoc-html-renderer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._