Markdown editor

Libraries used - Vue, Marked, DOMPurify

by Nihar Raote

HTML

<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/vue@next"></script>
<div id="mk-editor">
  <textarea :value="input" @input="compileMarkdown"></textarea>
  <div v-html="compiledMarkdown">
  </div>
  <button @click="clearEditor">Clear</button>
</div>

JavaScript

const app = Vue.createApp({
	data() {
  	return {
    	input: ''
    }
  },
  computed: {
  	compiledMarkdown() {
    	return marked(this.input)
    }
  },
  methods: {
  	compileMarkdown(e) {
    	this.input = e.target.value
    },
    clearEditor() {
    	this.input = ''
    }
  }
})

app.mount("#mk-editor")