10分钟写一个markdown编辑器

marked.js

Marked是一个Markdown解析引擎。

vue.js

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		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>
</head>
<body>
	<div id="editor">
	  <textarea :value="input" @input="update"></textarea>
	  <div v-html="compiledMarkdown"></div>
	</div>

	<script type="text/javascript" src="marked.js"></script>
	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
		new Vue({
		  el: '#editor',
		  data: {
		    input: '# hello'
		  },
		  computed: {
		    compiledMarkdown: function () {
		      return marked(this.input, { sanitize: true })
		    }
		  },
		  methods: {
		    update: function(e) {
		    	this.input = e.target.value;
		    }
		  }
		})

	</script>

</body>
</html>