A Pen by Daniel Schmidt.

A-Pen-by-Daniel-Schmidt.markdown

A Pen by Daniel Schmidt

A Pen by Daniel Schmidt on CodePen.

License.

index.html

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

script.js

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

style.scss

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