Skip to content

Instantly share code, notes, and snippets.

@dsci
Created January 9, 2014 07:03
Show Gist options
  • Save dsci/8330467 to your computer and use it in GitHub Desktop.
Save dsci/8330467 to your computer and use it in GitHub Desktop.
A Pen by Daniel Schmidt.
<div ng-app="markdownApp">
<nav class="navbar navbar-default">
<a class="navbar-brand" href="#">Markdown Editor</a>
</nav>
<div ng-controller="markdownController" class="pure-g">
<div class="pure-u-1-2" id="source-editor">
<p class="md-introduction">
Your Markdown here.
</p>
<textarea ng-model="editor.source">
</textarea>
<p id="compile-btn">
<button ng-click="compile()">Show me the HTML</button>
</p>
<div id="raw-source" ng-show="rawSource"><pre>{{rawSource}}</pre></div>
</div>
<div class="pure-u-1-2">
<p>Your preview here.</p>
<div id="preview">
<p ng-bind-html="editor.compiled"></p>
</div>
</div>
</div>
</div>
var markdownCompilerModule = angular.module('mdown', []);
markdownCompilerModule.factory('Compiler', function(){
return {
compile: function(source){
return window.marked(source);
}
}
});
var markdownApp = angular.module("markdownApp", ['ngSanitize', 'mdown']);
var markdownController = function($scope, Compiler){
$scope.editor = {
source: "",
compiled: ""
}
$scope.compile = function(){
if($scope.editor.source.length != 0){
$scope.editor.compiled = Compiler.compile($scope.editor.source);
$scope.rawSource = $scope.editor.compiled;
}else{
alert("Whoops. It seems you haven't start typing yet!");
}
}
$scope.$watch('editor.source', function(source){
if(source){
$scope.editor.compiled = Compiler.compile(source);
}
});
}
// Inject dependencies. Good for minification.
markdownController.$inject = ['$scope', 'Compiler'];
// Name the controllers for the app.
markdownApp.controller("markdownController", markdownController);
@import "compass";
@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:400,500);
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
$mdBorder: 1px solid #cccccc;
$leftMargin: 10px;
$leftBoxWidth: 95%;
button {
@include button;
}
#source-editor{}
#source-editor textarea{
height: 300px;
width: $leftBoxWidth;
font-family: 'Source Code Pro', sans-serif;
background-color: #ddddddd;
margin-left: $leftMargin;
}
#source-editor textarea,
#preview{
border: $mdBorder;
}
#source-editor #raw-source{
padding-left: $leftMargin;
width: $leftBoxWidth;
}
#preview{
font-family: 'Yanone Kaffeesatz', sans-serif;
min-height: 300px;
padding-left: $leftMargin;
padding-right: $leftMargin;
width:98%;
}
#compile-btn{
padding: $leftMargin;
}
.md-introduction{
margin-left: $leftMargin;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment