Markdown Preview using AngularJS and Showdown

Example of using Showdown as an AngularJS filter

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-sanitize.min.js"></script>
<div ng-app="markdownApp" ng-controller="markdownController">

    <textarea ng-model="input" placeholder="Enter Markdown text here" autofocus="true"></textarea>

    <div ng-cloak ng-if="input.length > 0">
        
        <h2>HTML Preview</h2>
        <div ng-bind-html="input | markdown" class="preview"></div>
    
        <h2>Raw HTML Output</h2>
        <div class="htmlOutput">{{ input | markdown }}</div>
        
    </div>
</div>

CSS

body {
    background-color: #333;
    color: white;
}

h1, h2 {
    font-family: sans-serif;
}

textarea {
    font-family: monospace;
    width: 100%;
    height: 12em;
}

.preview {
    font-size: smaller;
    color: #111;
    background-color: #eee;
    padding: 1em;
}

.htmlOutput {
    font-family: monospace;
    color: #eee;
}

JavaScript

angular.module('markdownApp', ['ngSanitize'])

.controller('markdownController', function($scope) {
    $scope.input = 
        'header 1 | header 2\n' +
        '---|---\n' +
        'row 1 col 1 | row 1 col 2\n';
})

.filter('markdown', function() {
    var converter = new Showdown.converter();
    return converter.makeHtml;
});