-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
14 lines (14 loc) · 1.22 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Markdown Editor: Vue, Lodash, Marked</title>
<script src="marked/marked@0.3.6"></script>
<script src="lodash/lodash@4.16.0"></script>
<script src="vue/vue.js"></script>
<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>new Vue({el:'#editor',data:{input:'# markdown on left, parsed on the right\n[Homepage](https://searchreturn.com "Homepage")'},computed:{compiledMarkdown:function(){return marked(this.input,{sanitize:true})}},methods:{update:_.debounce(function(e){this.input=e.target.value},300)}})</script>
</body>
</html>