Angularjs with Markdown

Using only angular and showdown to create markdown based templating.

by ihope

HTML

<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>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.1.2/css/foundation.min.css">
<script src="http://lambdax.github.io/static/to-markdown.js"></script>
<div ng-app="myApp">
    <div  ng-model='text' class="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>
    
<textarea source ng-model='text'></textarea>
</div>

CSS

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;
}

JavaScript

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

app.directive('markdown', function () {
    var converter = new Showdown.converter();
    return {
        restrict: 'C',
        controller: function($scope) {
            $scope.HTML = '';
            $scope.Markdown = '';
            $scope.toHTML = function (sourceMarkdown) {
                $scope.Markdown = sourceMarkdown || $scope.Markdown ;
                $scope.HTML = converter.makeHtml($scope.Markdown)
                return $scope.HTML;
            };
            
            $scope.toMarkdown = function (sourceHTML) {
                $scope.HTML = sourceHTML || $scope.HTML ;
                $scope.Markdown = toMarkdown($scope.HTML)
                return $scope.Markdown;
            };
            
        },
        link: function (scope, element, attrs) {
            attrs['contenteditable']='true';
        }
    };

});