Skip to content

Instantly share code, notes, and snippets.

@aj0strow
Last active August 29, 2015 14:03
Show Gist options
  • Save aj0strow/67c7ff8daea528628c33 to your computer and use it in GitHub Desktop.
Save aj0strow/67c7ff8daea528628c33 to your computer and use it in GitHub Desktop.
Markdown Editor
{
"name": "markdown-editor",
"private": true,
"dependencies": {
"bootstrap": "~3.2.0",
"angular": "~1.2.18",
"showdown": "~0.3.1"
}
}
<html ng-app="MarkdownEditor">
<head>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
</head>
<body ng-controller="MainController">
<section ng-view>
<div class="row">
<form class="col-md-6">
<textarea ng-model="text" class="form-control" rows="30"></textarea>
</form>
<div class="col-md-6" ng-bind-html="text | markdown"></div>
</div>
</section>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/showdown/compressed/showdown.js"></script>
<script src="bower_components/showdown/compressed/extensions/github.js"></script>
<script src="index.js"></script>
</body>
</html>
angular.module('MarkdownEditor', [])
.controller('MainController', function ($scope) {
$scope.text = 'Write *markdown* here...'
})
.filter('markdown', function ($sce) {
var converter = new Showdown.converter({ extensions: ['github'] })
return function (markdown) {
var html = converter.makeHtml(markdown || '')
return $sce.trustAsHtml(html)
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment