记录生活中的点点滴滴

0%

使用Markdown插件

这一篇博客来介绍一下怎样使用Markdown插件显示在前端网页中。

我适用的是 editor.md 的项目,地址:https://github.com/pandao/editor.md

先把这个github上的压缩包下载到本地。

然后将下列文件拷贝到前端项目中:

怎样使用其实我们去参考 examples 下的一些例子,就比如 simple.html,把它的源代码和网页效果看一看,照葫芦画瓢即可。

它的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
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>Simple example - Editor.md examples</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="../css/editormd.css" />
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
</head>
<body>
<div id="layout">
<header>
<h1>Simple example</h1>
</header>
<div id="test-editormd">
<textarea style="display:none;">[TOC]

#### Disabled options

- TeX (Based on KaTeX);
- Emoji;
- Task lists;
- HTML tags decode;
- Flowchart and Sequence Diagram;

#### Editor.md directory

editor.md/
lib/
css/
scss/
tests/
fonts/
images/
plugins/
examples/
languages/
editormd.js
...

​```html
&lt;!-- English --&gt;
&lt;script src="../dist/js/languages/en.js"&gt;&lt;/script&gt;

&lt;!-- 繁體中文 --&gt;
&lt;script src="../dist/js/languages/zh-tw.js"&gt;&lt;/script&gt;

<script src="js/jquery.min.js"></script> <script src="../editormd.min.js"></script> <script type="text/javascript"> var testEditor;
        $(function() {
            testEditor = editormd("test-editormd", {
                width   : "90%",
                height  : 640,
                syncScrolling : "single",
                path    : "../lib/"
            });

            /*
            // or
            testEditor = editormd({
                id      : "test-editormd",
                width   : "90%",
                height  : 640,
                path    : "../lib/"
            });
            */
        });
    &lt;/script&gt;
</body>
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

其实就是引入相关的css和js文件,不过js记得先进入jquery,然后把它的js代码段写入即可,记得替换一下括号内的id号以及path内容。

下面是我写的html文件以及项目文件图:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Markdown插件学习</title>
<link rel="stylesheet" href="lib/editormd/css/editormd.min.css">
</head>
<body>
<div id="md-content">
<textarea name="content" placeholder="博客内容" style="display: none;">
# 一号标题

## 二号标题

### 三号标题

​```html
&lt;!-- English --&gt;
&lt;script src="../dist/js/languages/en.js"&gt;&lt;/script&gt;

&lt;!-- 繁體中文 --&gt;
&lt;script src="../dist/js/languages/zh-tw.js"&gt;&lt;/script&gt;
​```</textarea>
</div>
&lt;script src="js/jquery-1.12.4.js"&gt;&lt;/script&gt;
&lt;script src="lib/editormd/editormd.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
var testEditor;
$(function() {
testEditor = editormd("md-content", {
width : "100%",
height : 640,
syncScrolling : "single",
path : "./lib/editormd/lib/"
});
});
&lt;/script&gt;
</body>
</html>

显示效果如下:

还是很简单的!