To embed a website editor markdowm

characteristic

• Support the "standard" Markdown / CommonMark Github style and grammar, but also as a variable code editor;
• Supports real-time preview, picture (cross-domain) upload, preformatted text / Code / insert tables, code folding, search and replace, read-only mode, custom styles, themes and multi-language syntax highlighting and other functions;
• Support ToC (Table of Contents), Emoji expression, Task lists, @ links Markdown extended syntax;
• TeX support scientific formulas (based KaTeX), flowchart and a timing chart Flowchart Sequence Diagram;
• Capable of recognizing and parsing the HTML tags, and supports custom filter tag resolution, reliable security and virtually unlimited scalability;
• Support AMD / CMD modular load (support Require.js & Sea.js), and support for custom extensions;
• Compatible with major browsers (IE8 +) and Zepto.js, and support iPad tablet device;
• Supports custom theme style;

1. Download the installation package markdown

Point I downloaded the download is complete after an archive and extract.

2. Portable Document

1. Place into the theme folder after extracting archive source->libsdirectory. Folders can be defined as the name you want. I read hereeditorMd

2.1 Create a new page. New blog site directory in a MyMarkdownfolder and create a new folder in the index.mdfile. Copy the following code into the index.mdfolder.

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

content title which is the content of this page when you open will be displayed on the control bar, modified into what you want to display.
layout inside the contents of the file is saved html code you created this page MyMarkdown.ejs, under the theme of the layout file folder, you can change the file name.

3. The editor's introduction css and js

Open _config.yml file in the theme directory, the editor js file and write CSS, as it is.

4. New MyMarkdown.ejs file

New MyMarkdown.ejs file in the theme folder layout folder. Copy the following code into MyMarkdown.ejs file.

<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. Success

Use the following command to re-compile, test it running locally.

hexo cl && hexo g && hexo s

Results are as follows