在⽹站中嵌⼊editor.mdmarkdown编辑器以及CSS样式修改欢迎访问我的个⼈博客查看显⽰效果：
最近在⽹上查markdown编辑器的时候，到了⼀款⽐较好的编辑器 editor.md, 开源免费的。
官⽹也有使⽤教程，我这⾥主要是针对hexo上的使⽤，因为我们正在hexo上使⽤的是静态页⾯，所以只能⽤于对⽂章的编辑。如果是动态⽹站，还可以实现，⽂章的⾃动发布等功能。
特性
⽀持“标准”Markdown / CommonMark和Github风格的语法，也可变⾝为代码编辑器；
⽀持实时预览、图⽚（跨域）上传、预格式⽂本/代码/表格插⼊、代码折叠、搜索替换、只读模式、⾃定义样式主题和多语⾔语法⾼亮等功能；
⽀持ToC（Table of Contents）、Emoji表情、Task lists、@链接等Markdown扩展语法；
⽀持TeX科学公式（基于KaTeX）、流程图 Flowchart 和 时序图 Sequence Diagram;
⽀持识别和解析HTML标签，并且⽀持⾃定义过滤标签解析，具有可靠的安全性和⼏乎⽆限的扩展性；
⽀持 AMD / CMD 模块化加载（⽀持 Require.js & Sea.js），并且⽀持⾃定义扩展插件；
兼容主流的浏览器（IE8+）和Zepto.js，且⽀持iPad等平板设备；
⽀持⾃定义主题样式；
下载
在前⾯已经说过了，可以直接去官⽹上下载，下载之后，解压缩，有如下⽂件：
解压缩后的⽂件
移植
移动⽂件
然后把这个⽬录的⽂件全部复制到主题⽬录下的source⽂件夹下的libs⽂件夹下，其实放在哪⼉都⽆所谓，只不过这个主题的外接库都放在libs⽂件夹下，移植的时候也⽅便，如下所⽰，我重新给⽂件夹命了个名字叫做editorMd。
解压缩后的⽂件
创建⼀个新的页⾯
使⽤如下⾯命令创建⼀个新的页⾯，名字叫做MyMarkdown（这个名字可以随便取）
hexo
hexo new page MyMarkdown
然后在hexo的source⽂件夹下会有⼀个index.md⽂件，修改⾥⾯的内容如下：
markdown
---
title: editor.md
date: 2019-11-16 11:20:03
type: "MyMarkdown"
layout: "MyMarkdown"
---
PS:
title⾥⾯的内容是你打开这个页⾯的时候会在控制栏上显⽰的内容，修改成你想要显⽰的内容
layout⾥⾯的内容就是你创建的这个页⾯的html代码的保存⽂件MyMarkdown.ejs，在主题的layout⽂件夹下，可以修改⽂件名。
导⼊editor.md⽂件，编辑代码
做完上⾯的⼯作之后就可以开始对页⾯的显⽰代码进⾏编辑了
创建ejs⽂件
在主题的layout⽂件夹下创建⼀个⽂件，名字和上⾯填写index.md⽂件的时候的layout后⾯的内容⼀样，如下所⽰。
创建ejs⽂件
导⼊editor的css和js
打开主题⽬录下的_l⽂件，将editor的js⽂件和CSS写⼊，如下所以，其实也可以直接在要编辑的ejs⽂件⾥⾯写绝对路径的，但是为了规范化和可以执⾏，还是将路径卸载该⽂件下⽅便管理。
导⼊js和css
现在打开layout⽂件夹下的MyMarkdown.ejs⽂件开始对代码的编辑了
写⼊如下代码：
html
<link rel="stylesheet" href="<%- theme.libs.css.editormdCss %>">  <!--导⼊css⽂件-->
<style type="text/css">
/* don't remove. */
.page-cover {
/* height: 75vh; */
height: 940px;    /*调整⾼度*/
}
</style>
<div class="pd-header page-cover">
<div class="editormd" id="my-editormd">
<textarea ></textarea>
</div>
</div>
<!--导⼊JS⽂件-->
<script src="<%- theme.libs.js.jquery %>"></script>
<script src="<%- theme.libs.js.editormdJs %>"></script>
<script  type="text/javascript">
var myEditor;
$(function() {
myEditor = editormd("my-editormd", {
width  : "90%",
height  : 840,
syncScrolling : "single",
path    : "/libs/editorMd/lib/",
});
});
</script>
查看效果
使⽤如下命令，重新编译，在本地运⾏试验⼀下。
hexo
hexo cl && hexo g && hexo s
会发现显⽰效果如下所⽰，⽐较乱，其中的罪魁祸⾸就是materialize.min.css⽂件下的选择器样式对ed
itor.md的选择器样式进⾏的修改，我也不知道如何进⾏避免，不光如此，打开图⽚，链接等按钮的时候显⽰效果也很不好。
导⼊js和css
从上⾯的显⽰效果可以看出，很乱，⽽且主题导航栏还把我们的编辑器给遮挡了，所以需要修改CSS样式让他好看与正常
样式修改
修改CSS样式
调试查看显⽰不正常的原因的时候，发现是materialize.min.css下的样式对编辑器样式的⼲扰，所以在这⾥对有影响的样式进⾏重编辑。完整的主题样式如下。
html
<link rel="stylesheet" href="<%- theme.libs.css.editormdCss %>">
<style type="text/css">
/* don't remove. */
.page-cover {
/* height: 75vh; */
height: 940px;
}
.editormd {
top: 76px;
}
pre {
padding: 0;
}
.editormd-menu > li.divider {
overflow: inherit;
padding: 5px 0px;
}
header .nav-transparent {    /*修改当⾏兰样式*/
background-image: linear-gradient(to right, #0EBAB8 0%, #0B6AA0 100%);
好看的css代码}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。