Ember-remarkable NPM

ember-remarkable

Add Remarkable markdown parsing helpers and components to your Ember app.

Installation

ember install ember-remarkable

Usage

{{md-text
  text        = "# Markdown text!"
  typographer = true
  linkify     = false
}}

Options

option	type	default	security	description
`text`	string			Markdown content to render
`typographer`	boolean	`false`		Whether to enable Remarkable's typographer option
`linkify`	boolean	`false`		Whether to enable Remarkable's linkify option
`html`	boolean	`false`	:warning: insecure	Whether to enable Remarkable's html option
`extensions`	boolean	`true`		Whether to enable Remarkable's syntax extensions
`dynamic`	boolean	`false`	:warning: insecure	Whether to enable dynamic template rendering (see below)

Inline multi-line input

When you provide the text inline, you can split it into multiple lines like this:

<div>
  {{md-text
    text = "
# Hello world

Note that you have to unindent
the multiline `text` content.
    "
  }}
</div>

Dynamic Template Rendering

By enabling the dynamic option you can embed Ember components into your markdown:

{{md-text
  text = "{{link-to 'Foo' 'foo'}}"
}}

This feature is useful for implementing CMS-like functionality with Ember: it lets your Markdown content to be dynamic and Ember-driven rather than just static HTML.

But this approach is not encouraged by the Ember core team and might be deprecated in the future (though there are no plans to deprecate it as of May 2016).

:warning: Security implications

By using the html and dynamic template options you can make your app vulnerable to XSS.

Use those options only if your Markdown content is provided by trusted team members and regular users have no way to update it.

Syntax Highlighting

This addon uses highlight.js for syntax highlighting, in order to include it you just need to use Github style code-fencing. Currently, only the component supports syntax highlighting.

Excluding Highlightjs

The use of highlight.js can be disabled by adding the following option to your config/environment.js:

remarkable: {
  excludeHighlightJs: true
}

Setting to true will ensure that highlight.js won't be included in your build.

Custom Highlighting

The highlight function, as used by remarkable, can be overriden. To do this, create your own md-text component:

import MDTextComponent from 'ember-remarkable/components/md-text';

export default MDTextComponent.extend({ 
  highlight: function(str, lang) {
     return '';
  }
});