特性

  • 支持“标准”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等平板设备；
  • 支持自定义主题样式；

点击访问博客

1.下载markdown安装包

点我下载 下载完成之后是一个压缩包，解压。

matery主题-给网站嵌入一个markdowm编辑器_自定义

2.移植文件

1.将压缩包解压之后放到 主题文件夹的source->libs目录中。可以将文件夹定义为你想要的名字。我这里改为editorMd
matery主题-给网站嵌入一个markdowm编辑器_压缩包_02

2.1新建一个新的页面。在博客站点目录下新建一个MyMarkdown文件夹，并在文件夹下新建index.md文件。将下面的代码复制到index.md文件夹中。

---
title: editor.md
date: 2020-02-16 11:20:03
type: "MyMarkdown"
layout: "MyMarkdown"
---

title里面的内容是你打开这个页面的时候会在控制栏上显示的内容，修改成你想要显示的内容
layout里面的内容就是你创建的这个页面的html代码的保存文件MyMarkdown.ejs，在主题的layout文件夹下，可以修改文件名。

matery主题-给网站嵌入一个markdowm编辑器_html_03

3.导入editor的css和js

打开主题目录下的_config.yml文件，将editor的js文件和CSS写入，如下所以。

matery主题-给网站嵌入一个markdowm编辑器_自定义_04

4.新建MyMarkdown.ejs文件

在主题文件夹下的layout文件夹中新建MyMarkdown.ejs文件。将下列代码复制到MyMarkdown.ejs文件中。

<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, #bf30a3 0%, #0f9d58 100%);
    }

    .editormd-form input[type="text"], 
    .editormd-form input[type="number"] {
        height: 15px;
        margin: 0px;
        font-size: 14px;
    }

    .editormd-form input[type="text"] {
        display: inline-block;
        width: 246px;
    }

    .editormd-dialog-container label {
      font-size: 14px;
      color: #444;
  }

    .editormd-dialog-container select {
      display: inline-block;
      background-color: rgba(255,255,255,0.9);
      width: 182px;
      border-radius: 2px;
      height: 25px;
  }

</style>

<div class="pd-header page-cover">
  <div class="editormd" id="my-editormd">
    <textarea style="display:none;"></textarea>
  </div>
</div>

<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   : "98%",
        height  : 840,
        syncScrolling : "single",
        path    : "/libs/editorMd/lib/",
       // theme: "dark",
      //  previewTheme: "dark",
      //  editorTheme: "pastel-on-dark",
        markdown: '',
        codeFold: true,
        emoji: true,
        taskList: true,
        tocm: true,         // Using [TOCM]
        tex: true,                   // 开启科学公式TeX语言支持，默认关闭
        flowChart: true,             // 开启流程图支持，默认关闭
        sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
        htmlDecode : "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启   
    });
  });
</script>

5.成功

使用如下命令，重新编译，在本地运行试验一下。

hexo cl && hexo g && hexo s

效果如下
matery主题-给网站嵌入一个markdowm编辑器_css_05