classmember/vue-markdown-editor.html

## vue-markdown-editor.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://unpkg.com/vue@next"></script>
<script type="text/javascript" src="https://unpkg.com/marked@0.3.6"></script>
<script type="text/javascript" src="https://unpkg.com/lodash@4.16.0"></script>

<title> Markdown </title>
<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>

</head>
<body>

<div id="editor">
  <textarea :value="input" @input="update"></textarea>
  <div v-html="compiledMarkdown"></div>
</div>

<script type="text/javascript">

const app = Vue.createApp({
  data() {
    return {
      input: `# Markdown

This is a simple markdown example

### Reference:

[vuejs.org](https://v3.vuejs.org/)
`
    }
  },
  computed: {
    compiledMarkdown() {
      return marked(this.input, { sanitize: true });
    }
  },
  methods: {
    update: _.debounce(function(e) {
      this.input = e.target.value;
    }, 300)
  }
})

app.mount('#editor')

</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="https://unpkg.com/vue@next"></script>
	<script type="text/javascript" src="https://unpkg.com/marked@0.3.6"></script>
	<script type="text/javascript" src="https://unpkg.com/lodash@4.16.0"></script>

	<title> Markdown </title>
	<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>

	</head>
	<body>

	<div id="editor">
	<textarea :value="input" @input="update"></textarea>
	<div v-html="compiledMarkdown"></div>
	</div>

	<script type="text/javascript">

	const app = Vue.createApp({
	data() {
	return {
	input: `# Markdown

	This is a simple markdown example

	### Reference:

	[vuejs.org](https://v3.vuejs.org/)
	`
	}
	},
	computed: {
	compiledMarkdown() {
	return marked(this.input, { sanitize: true });
	}
	},
	methods: {
	update: _.debounce(function(e) {
	this.input = e.target.value;
	}, 300)
	}
	})

	app.mount('#editor')

	</script>

	</body>
	</html>