在HTML页面中引用Markdown编辑器(Editor.md)

简介: 在HTML页面中引用Markdown编辑器(Editor.md)

最近写博客项目,用到了Markdown编辑器,这里介绍一款国内好用的Markdown编辑器:Editor.md,下面介绍一下该编辑器以及如果在页面中引用。

1、下载Ediotor.md

官网:Editor.md - 开源在线 Markdown 编辑器

这个编辑器是国内开源的,一些文档也是用中文写的,方便大家阅读

点击下载安装,页面会下滑,点击Github下载会得到一个压缩包。

 

如果大家闲麻烦,这里我放在百度云中,大家自行下载:

链接:https://pan.baidu.com/s/15dsdsEQn3Z5Ur0N8Lg8-cQ 

提取码:5a7l

2、引入Ediotor.md

把上面下载的Editor.md代码解压缩,这里解压缩后的名字我改为 editor.md,然后与我们想要放的html文件同级。

下一步,在html中引入下面几行代码

<link rel="stylesheet" href="editor.md/css/editormd.min.css">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>

注意:文件名和路径一定要与代码中的一一对应,要不然会引入失败!!!

3、确定Ediotor.md在哪里显示

我们先创建一个div标签,用来显示Ediotor.md,id设为editor

然后在代码中,添加下面代码

<script>
        var editor = editormd("editor", {
            // 这里的尺寸必须在这里设置,设置样式会被 editormd 自动覆盖
            width: "100%",
            // 设置高度
            height: "500px",
            // 编辑器中初始内容
            markdown: "# 在这里写下一篇博客",
            // 指定插件路径
            path: "editor.md/lib/"
        });
    </script>

代码中 editor 与 div标签id属性对应

添加完之后,Ediotor.md就引入成功啦

拓展:如果想给编译器添加一些样式,可以添加到div中,如果要设置透明,可以使用opacity这个属性。

相关文章
|
27天前
|
移动开发 前端开发 JavaScript
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
34 0
|
3天前
|
缓存 Java 应用服务中间件
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二)
这篇文章详细介绍了在SpringMVC中创建JSP页面的全过程,包括项目的创建、配置、Tomcat的设置,以及如何实现页面跳转和配置模板解析器,最后还对比了JSP和HTML模板解析的差异。
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二)
|
4天前
Html 表格 在线转 Markdown
Html 表格 在线转 Markdown
10 0
|
5天前
|
存储 缓存 前端开发
如何将 JavaScript 添加到 HTML 页面
如何将 JavaScript 添加到 HTML 页面
15 0
|
5天前
|
Web App开发 编解码 移动开发
HTML页面关于高分屏的设置
HTML页面关于高分屏的设置
15 0
|
1月前
|
自然语言处理 开发者 Python
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的 HTML 内容。Markdown 的语法简洁明了、学习容易,而且功能比纯文本更强。
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的 HTML 内容。Markdown 的语法简洁明了、学习容易,而且功能比纯文本更强。
|
1月前
|
JSON JavaScript 数据格式
文本-----wangEditor的使用,设置和获取内容,展示HTML无样式怎么办????console同步展示怎样写,Vue的配置在Vue3配置文件中的配置,是editor中的v-model绑定的值
文本-----wangEditor的使用,设置和获取内容,展示HTML无样式怎么办????console同步展示怎样写,Vue的配置在Vue3配置文件中的配置,是editor中的v-model绑定的值
|
1月前
|
Unix Linux Shell
Sphinx是一个Python文档生成工具,它可以解析reStructuredText或Markdown格式的源代码注释,并生成多种输出格式,如HTML、LaTeX、PDF、ePub等。
Sphinx是一个Python文档生成工具,它可以解析reStructuredText或Markdown格式的源代码注释,并生成多种输出格式,如HTML、LaTeX、PDF、ePub等。
|
1月前
|
编解码
WordPress页面文件添加html后缀名
wordpress 页面默认不能实现伪静态链接,手动在链接中添加 “.html” ,会自动转码为 “-html” ,但万能的 WordPress,你能想到的功能都会有相应的插件帮你实现。
23 0
文本,Vitepress的优势之处,配合Typora进行页面撰写可以同步设计相同的HTML页面
文本,Vitepress的优势之处,配合Typora进行页面撰写可以同步设计相同的HTML页面