安装部署
新建一个html项目
1
2- 创建一个js文件夹
- 新建一个index.html文件下载marked.js文件
1
https://github.com/markedjs/marked/blob/master/lib/marked.js
下载jquery.js文件
1
http://www.jq22.com/jquery/jquery-3.3.1.zip
下载ace-builds
1
https://github.com/ajaxorg/ace-builds/
配置
- 解压jquery文件，将jquery-3.3.1.js重命名为jquery.js文件，并放置到js目录中
- 将marked.js文件放置到js目录中
- 将下载好的ace-builds解压并将ace-builds/src放置到js文件夹中，重命名为ace
直接上源码看效果
- 覆盖index.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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>markdown编辑器</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
outline: none;
border-radius: 0;
}
html,
body {
width: 100%;
height: 100%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #ebebeb;
}
#toolbar {
height: 50px;
background-color: #444;
width: 100%;
color: #fff;
line-height: 50px;
}
#container {
overflow: auto;
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 50px;
}
#editor-column,
#preview-column {
width: 49.5%;
height: 100%;
overflow: auto;
position: relative;
background-color: #fff;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
#mdeditor,
#preview,
#panel-editor,
#panel-preview {
height: 100%;
width: 100%;
}
</style>
<script src="js/marked.js"></script>
<script src="js/ace/ace.js"></script>
<script src="js/jquery.js"></script>
</head>
<body>
<div id="toolbar"></div>
<div id="container">
<div id="editor-column" class="pull-left">
<div id="panel-editor">
<div class="editor-content" id="mdeditor"></div>
</div>
</div>
<div id="preview-column" class="pull-right">
<div id="panel-preview">
<div id="preview" class="markdown-body"></div>
</div>
</div>
</div>
<script>
function insertText(val){
acen_edit.insert(val);//光标位置插入
}
var acen_edit = ace.edit('mdeditor');
acen_edit.setTheme('ace/theme/chrome');
acen_edit.getSession().setMode('ace/mode/markdown');
acen_edit.renderer.setShowPrintMargin(false);
$("#mdeditor").keyup(function() {
$("#preview").html(marked(acen_edit.getValue()));
});
</script>
</body>
</html>
- 找一个喜欢的markdown,css样式,开始吧