Angularjs with Markdown

Using only angular and showdown to create markdown based templating.

by alekskorovin

HTML

<div ng-app="myApp" data-markdown>
# Hello There
This is [an example](http://example.com/ "I'm the title") of an inline link.
    
### Define a list below
    
+ Get milk
+ Buy food
    
This is paragraph text with some **bold** or some _italics_ how about _**both**_ ?

**Code** block below:
    
    function hello() { 
      alert('Hello world!'); 
    }
</div>

CSS

</style> <link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.1.2/css/foundation.min.css" /> 
<style>
pre {
    background-color: #F8F8F8;
border: 1px solid #DDD;
font-size: 13px;
line-height: 19px;
overflow: auto;
padding: 6px 10px;
border-radius: 3px
}
code {
    color:#000;
}
li {
    list-style-type: disc;
    list-style-position: inside;
    padding: 0 12px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>

JavaScript

var app = angular.module('myApp', []);

app.directive('markdown', function () {
    var converter = new Showdown.converter();
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var htmlText = converter.makeHtml(element.text());
            element.html(htmlText);
        }
    };

});