-
Notifications
You must be signed in to change notification settings - Fork 0
/
markdownEdit.html
57 lines (54 loc) · 4.49 KB
/
markdownEdit.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>markdown</title>
<style>
* { margin: 0; padding: 0; } body{margin:0 auto;font-family:ubuntu,Tahoma,"Microsoft YaHei",arial,sans-serif;color:#444;line-height:1;padding:30px}img{max-width:100%}@media screen and (min-width:1000px){body{width:842px;margin:10px auto}}h1,h2,h3,h4{color:#111;font-weight:400;margin-top:1em}h1,h2,h3,h4,h5{font-family:Georgia,Palatino,serif}dl,h1,h2,h3,h4,h5{margin-bottom:16px;padding:0}p{margin-top:8px;margin-bottom:3px}h1{font-size:48px;line-height:54px}h2{font-size:36px;line-height:42px}h1,h2{border-bottom:1px solid #EFEAEA;padding-bottom:10px}h3{font-size:24px;line-height:30px}h4{font-size:21px;line-height:26px}h5{font-size:18px;line-height:23px}a{color:#09f;margin:0 2px;padding:0;vertical-align:baseline;text-decoration:none}a:hover{text-decoration:none;color:#f60}ol,ul{padding:0;padding-left:18px;margin:0}li{line-height:24px}ol,p,ul{font-size:16px;line-height:24px}ol ol,ul ol{list-style-type:lower-roman}code,pre{font-family:Consolas,Monaco,Andale Mono,monospace;background-color:#f7f7f7;color:inherit}code{font-family:Consolas,Monaco,Andale Mono,monospace;margin:0 2px}pre{font-family:Consolas,Monaco,Andale Mono,monospace;line-height:1.7em;overflow:auto;padding:6px 10px;}pre>code{font-family:Consolas,Monaco,Andale Mono,monospace;border:0;display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:1.6em;font-size:.95em;white-space:pre;background:0 0}code{color:#666555}aside{display:block;float:right;width:390px}blockquote{border-left:.5em solid #eee;padding:0 0 0 2em;margin-left:0}blockquote cite{font-size:14px;line-height:20px;color:#bfbfbf}blockquote cite:before{content:'\2014 \00A0'}blockquote p{color:#666}hr{text-align:left;color:#999;height:2px;padding:0;margin:16px 0;background-color:#e7e7e7;border:0 none}dl{padding:0}dl dt{padding:10px 0;margin-top:16px;font-size:1em;font-style:italic;font-weight:700}dl dd{padding:0 16px;margin-bottom:16px}dd{margin-left:0}table{border-spacing:0;width:100%}table{border:solid #ccc 1px}table thead{background:#f7f7f7}table thead tr:hover{background:#f7f7f7}table tr:hover{background:#eee;-o-transition:all .1s ease-in-out;-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-ms-transition:all .1s ease-in-out;transition:all .1s ease-in-out}.table th,table td{border-left:1px solid #ccc;border-top:1px solid #ccc;padding:10px;text-align:left}table th{border-top:none;text-shadow:0 1px 0 rgba(255,255,255,.5);padding:5px;border-left:1px solid #ccc}table td:first-child,table th:first-child{border-left:none}.task-list-item input{margin:0 !important;}input, button, select, textarea, div { outline: none } textarea { resize: none } .editDiv { border: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: row; justify-content: space-around; align-items: center; overflow: hidden; } .editext { height: 90%; width: 48%; font-size: 18px; font-family: 'Consolas', 'Courier' !important; border: 0; } .show{width:48%;height: 90%;overflow: auto;}
</style>
</head>
<body>
<div class="editDiv">
<div class="show" v-html="resMarkdown"></div>
<textarea class="editext" v-model="inputMarkDown" v-focus></textarea>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/showdown@1.9.0/dist/showdown.min.js"></script>
<script>
var vm = new Vue({
el: '.editDiv',
data:{
oShowDown:'',
inputMarkDown:'',
resMarkdown:''
},
created () {
this.oShowDown=new showdown.Converter({
tables:true,
tasklists:true
});
},
mounted () {
if(localStorage.str){
this.inputMarkDown=localStorage.str;
}
},
directives: {
focus: {
inserted: function (el) {
el.focus()
}
}
},
watch:{
inputMarkDown:function(newStr,oldStr){
localStorage.str=newStr;
this.resMarkdown=this.oShowDown.makeHtml(newStr);
}
}
});
</script>
</body>
</html>