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	⚠️ insecure	Whether to enable Remarkable's html option
extensions	boolean	true		Whether to enable Remarkable's syntax extensions
dynamic	boolean	false	⚠️ 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).

⚠️ 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 '';
  }
}); 

Plugins

You can pass plugins to each component instance by providing an array of plugin functions in a plugin option.

Development

Installation

• git clone this repository
• npm install
• bower install

Running

• ember server
• Visit your app at http://localhost:4200.

Running Tests

• ember test
• ember test --server

Building

• ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.

Thanks to the following

• https://github.com/jonschlinkert/remarkable
• http://highlightjs.org

License

MIT

Contributing

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request

---

Crafted with <3 by John Otander(@4lpine).