vue markdown editor

index.html

<div id="editor" class="editor-shell md-editor">

  <div id="html-editor" class="panel">
    <div class="panel-header">Markdown Editor</div>
    <textarea 
              id="md-input" 
              class="panel-content" 
              :value="input" 
              @input="update">
    </textarea>
  </div>

  <div id="html-preview" class="panel">
    <div class="panel-header">HTML Preview</div>
    <div id="preview" class="panel-content" v-html="compiledMarkdown">
    </div>
  </div>

</div>

script.babel

new Vue({
  el: "#editor",
  data: {
    input: "# Type some markdown!"
  },
  computed: {
    compiledMarkdown: function() {
      return marked(this.input, { sanitize: true });
    }
  },
  methods: {
    update: _.debounce(function(e) {
      this.input = e.target.value;
    }, 300)
  }
});

script.js

new Vue({
  el: '#editor',
  data: {
    input: ''
  },
  computed: {
    compiledMarkdown: function () {
      return marked(this.input, { sanitize: true })
    }
  },
  methods: {
    update: _.debounce(function (e) {
      this.input = e.target.value
    }, 300)
  }
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

style.css

html, body, #editor {
  margin: 0;
  height: 100%;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #333;
}

.editor-shell{
  display: flex;
  height: 100%;
}

code {
  color: #f66;
}

#preview {
  background-color: #fff;
  height: 100%;
}

#md-input {
  border: none;
  height: 100%;
  font-size: 1.2rem;
  outline: none;
  resize: none;
  background-color: #f5f5f5;
  overflow: hidden;
}

.panel-header {
  color: #f1f1f1;
  background-color: #35495e;
  padding: 2%;
  font-size: 1.2rem;
  font-weight: bold;
  border-bottom: .2rem solid #41b883;
}
.panel {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border: 1px solid #ccc;
}

.panel-content {
  padding: 2%;
}

vue-markdown-editor.markdown

vue markdown editor

A simple Vue markdown editor based on the official Vue docs example.

A Pen by Michael Garten on CodePen.

License.