Skip to content

Instantly share code, notes, and snippets.

@dsci

dsci/A-Pen-by-Daniel-Schmidt.markdown

Created January 9, 2014 07:03
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dsci/8330467 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dsci/8330467 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. dsci created this gist Jan 9, 2014.
    7 changes: 7 additions & 0 deletions A-Pen-by-Daniel-Schmidt.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    A Pen by Daniel Schmidt
    -----------------------


    A [Pen](http://codepen.io/dsci/pen/Istpa) by [Daniel Schmidt](http://codepen.io/dsci) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/dsci/pen/Istpa/license).
    24 changes: 24 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,24 @@
    <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>
    39 changes: 39 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,39 @@
    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);
    47 changes: 47 additions & 0 deletions style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,47 @@
    @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;
    }