urjeetpatel/markdown.html

## markdown.html
<html>
<head>
<script src="https://unpkg.com/marked@0.3.6"></script>
<script src="https://unpkg.com/lodash@4.16.0"></script>
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<script src="https://unpkg.com/vuex"></script>
</head>
<body>
<div id="app">
	<a @click="clear">Reset to Default</a>
	<div id="editor">
	  <textarea :value="saved" @input="update"></textarea>
	  <div v-html="compiledMarkdown"></div>
	</div>
</div>
<style>
html,
body,
#editor {
  margin: 0;
  height: 100%;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #333;
}

textarea,
#editor div {
  display: inline-block;
  width: 49%;
  height: 100%;
  vertical-align: top;
  box-sizing: border-box;
  padding: 0 20px;
}

textarea {
  border: none;
  border-right: 1px solid #ccc;
  resize: none;
  outline: none;
  background-color: #f6f6f6;
  font-size: 14px;
  font-family: 'Monaco', courier, monospace;
  padding: 20px;
}

code {
  color: #f66;
}
</style>
<script>
const store = new Vuex.Store({
  state: {
    text: localStorage.getItem("oldMarkdown") || "# Hello"
  },
  mutations: {
    update(state, new_text) {
      localStorage.setItem("oldMarkdown", new_text)
      state.text = new_text
    },
	delete(state) {
	  localStorage.setItem("oldMarkdown", "# Hello")
	  state.text = "# Hello"
	}
  }
})

new Vue({
  el: '#app',
  data: {
    input: ""
  },
  computed: {
    compiledMarkdown: function() {
      return marked(this.input, {
        sanitize: true
      })
    },
    saved: {
      get: function() {
        return store.state.text
      },
      set: function(newValue) {
        this.input = newValue;
      }
    }
  },
  methods: {
	clear: function(){
		store.commit('delete')
		this.input = this.saved
	},
    update: _.debounce(function(e) {
      this.input = e.target.value
      store.commit('update', this.input)
    }, 300)
  },
  mounted: function () {
  this.$nextTick(function () {
	console.log(this)
	this.input = this.saved
  })
}

})
</script>

</body>
</html>
	<html>
	<head>
	<script src="https://unpkg.com/marked@0.3.6"></script>
	<script src="https://unpkg.com/lodash@4.16.0"></script>
	<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
	<script src="https://unpkg.com/vuex"></script>
	</head>
	<body>
	<div id="app">
	<a @click="clear">Reset to Default</a>
	<div id="editor">
	<textarea :value="saved" @input="update"></textarea>
	<div v-html="compiledMarkdown"></div>
	</div>
	</div>
	<style>
	html,
	body,
	#editor {
	margin: 0;
	height: 100%;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	color: #333;
	}

	textarea,
	#editor div {
	display: inline-block;
	width: 49%;
	height: 100%;
	vertical-align: top;
	box-sizing: border-box;
	padding: 0 20px;
	}

	textarea {
	border: none;
	border-right: 1px solid #ccc;
	resize: none;
	outline: none;
	background-color: #f6f6f6;
	font-size: 14px;
	font-family: 'Monaco', courier, monospace;
	padding: 20px;
	}

	code {
	color: #f66;
	}
	</style>
	<script>
	const store = new Vuex.Store({
	state: {
	text: localStorage.getItem("oldMarkdown") \|\| "# Hello"
	},
	mutations: {
	update(state, new_text) {
	localStorage.setItem("oldMarkdown", new_text)
	state.text = new_text
	},
	delete(state) {
	localStorage.setItem("oldMarkdown", "# Hello")
	state.text = "# Hello"
	}
	}
	})

	new Vue({
	el: '#app',
	data: {
	input: ""
	},
	computed: {
	compiledMarkdown: function() {
	return marked(this.input, {
	sanitize: true
	})
	},
	saved: {
	get: function() {
	return store.state.text
	},
	set: function(newValue) {
	this.input = newValue;
	}
	}
	},
	methods: {
	clear: function(){
	store.commit('delete')
	this.input = this.saved
	},
	update: _.debounce(function(e) {
	this.input = e.target.value
	store.commit('update', this.input)
	}, 300)
	},
	mounted: function () {
	this.$nextTick(function () {
	console.log(this)
	this.input = this.saved
	})
	}

	})
	</script>

	</body>
	</html>