ngBindHtml and Showdown to Render Markdown

An easy way to store formatted text content without having to worry about storing HTML is by using Markdown. Markdown allows you to add headers, links, code blocks, and all other necessary formatting to a string without using any kind of special characters.

Markdown

This kind of content is easily stored in a database as a string. Retrieving it is a breeze as well. So what’s left? Rendering it on the client.

Showdown

Showdown is a Markdown parser (is that what it’s called?). It can take a
Markdown string and process it into an HTML string. We can assign the
value on our controller since we need to mark it as trusted first.

$scope.markdownHtml = $sce.trustAsHtml(new Showdown.converter().makeHtml(md);

A few important points in this code sample.

new Showdown.converter().makeHtml() // This will take your Markdown string and return an HTML string.

$sce // A service that provides Strict Contextual Escaping.

Read more about it in the API.

$sce

We need to utilize $sce to let Angular know that the HTML string we are binding to the view is safe. By calling trustAsHtml we are saying that we know the string is sanitized and it is safe to render.

Now we can easily bind to the view

div ng-bind-html='markdownHtml'

markdownHtml is the string value on the scope.

 
10
Kudos
 
10
Kudos

Now read this

$event, where does it come from?

ngClick, ngMousedown, ngMouseup, and every directive event handler in Angular provide the $event parameter in callbacks. I will show you how to do this with your own directives. Angular provides an extremely useful service known as... Continue →