在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这个属性。

相关文章
|
1月前
|
程序员 Linux iOS开发
一款比Typora更简洁优雅的Markdown编辑器神器(完全开源免费)
一款比Typora更简洁优雅的Markdown编辑器神器(完全开源免费)
|
1月前
使用HTML编写注册页面
使用HTML编写注册页面
13 1
|
2月前
|
移动开发 HTML5
html5初音未来减压页面源码
A Mainland China friendly and independent version extracted from https://aidn.jp/mikutap
85 2
|
2天前
|
Web App开发 API
通过html页面方式访问www.iximo.com的方式(原创)
通过html页面方式访问www.iximo.com的方式(原创)
13 2
|
1天前
|
前端开发 C++ iOS开发
几款主流好用的markdown编辑器介绍
几款主流好用的markdown编辑器介绍
25 1
|
3天前
|
数据采集 数据挖掘 Python
Python之html2text: 将HTML转换为Markdown 文档示例详解
Python之html2text: 将HTML转换为Markdown 文档示例详解
5 0
|
11天前
|
移动开发 前端开发 JavaScript
【专栏:HTML与CSS实战项目篇】使用HTML5与CSS3制作一个动态表单验证页面
【4月更文挑战第30天】本文介绍了使用HTML5和CSS3创建动态表单验证页面的方法。首先,简述HTML5用于构建网页内容,CSS3用于描述样式。接着,分四步展示实现过程:1) 设计包含输入框和提示信息的表单结构;2) 使用CSS3创建样式,增强视觉效果;3) 使用JavaScript监听输入事件,动态验证表单并显示错误信息;4) 测试和调试确保跨平台兼容性。通过学习,开发者能掌握创建带验证功能的表单,提升用户体验。
|
11天前
|
前端开发 测试技术 UED
【专栏:HTML 与 CSS 实战项目篇】实现一个在线产品展示页面
【4月更文挑战第30天】本文介绍了使用HTML和CSS创建吸引人的在线产品展示页面的实战步骤,包括页面设计规划、HTML结构搭建、CSS样式设计、具体页面实现、交互效果添加、优化与提升。通过简洁布局、产品列表和详情页设计,实现易用且具吸引力的展示效果。优化图片和代码,提升性能,以助企业在数字时代脱颖而出。
|
13天前
|
API CDN
Electron Markdown编辑器实战:资源管理器实现
Electron Markdown编辑器实战:资源管理器实现
|
15天前
|
前端开发 JavaScript 搜索推荐
react-app框架——使用monaco editor实现online编辑html代码编辑器
react-app框架——使用monaco editor实现online编辑html代码编辑器
36 3