JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/coreyti/showdown/master/compressed/showdown.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app="myApp" ng-controller="SampleCtrl">
<markdown ng-model="someCode">
</markdown>
<textarea ng-model="someCode" style="width:400px;height:200px;"></textarea>
</div>
JavaScript
angular.module('myApp', [])
.directive('markdown', function() {
var converter = new Showdown.converter();
var link = function(scope, element, attrs, model) {
var render = function(){
var htmlText = converter.makeHtml(model.$modelValue);
element.html(htmlText);
};
scope.$watch(attrs['ngModel'], render);
render();
};
return {
restrict: 'E',
require: 'ngModel',
link: link
}
})
.controller('SampleCtrl',
function($scope){
$scope.someCode = "# Hello World!\n- Zeppelin\n- That guy\n- Kronos\n";
});