嵌入在线Markdown编辑器

因为Hexo是经过静态编译的, 所以其实不太需要在线编辑的Markdown, 因为平常都用Typora. 但是这仍然可以作为一个小功能放在自己的网站中. 在它的文档还有其他功能, 比如做在线代码编译器等.

下载Markdown

这里这里找到下载并安装, 下载editormd到本地并解压. 因为写起来比较麻烦所以我就把解压后的点去掉了.

添加文件和新页面

将刚解压的editormd整体放到blog\themes\hexo-theme-matery\source\libs下.

在blog文件夹下命令行敲入:

hexo new page markdown

并为blog\source\markdown\index.md添加类别和布局:

---
title: markdown
date: 2020-07-25 16:41:26
type: "markdown"
layout: "markdown"
---

添加css和js路径

在主题配置文件_config.yml中的libs找到css和js, 将新的相对文件路径加到最后.

libs:
  css:
      # ...
    editormd:/libs/editormd/css/editormd.css
  js:
      # ...
    editormd: /libs/editormd/editormd.min.js

添加ejs文件

虽然刚才已经新起一个页面, 但是还没有为这个页面提供样式和内容.

找到blog\themes\hexo-theme-matery\layout, 创建一个与刚才新建页面的layout同名的markdown.ejs文件. 内容如下:

<link rel="stylesheet" href="<%- theme.libs.css.editormd %>">

<style type="text/css">
    /* don't remove. */
    .page-cover {
        /* height: 75vh; */
        height: 960px;
    }

    .editormd {
        top: 22px;
    }

    pre {
        padding: 0;
    }

    .editormd-menu>li.divider {
        overflow: inherit;
        padding: 5px 0px;
    }

    header .nav-transparent {
        /*修改导航栏颜色*/
        background-image: linear-gradient(to right, #16b182 0%, #058044 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;
    }

    .navbar-fixed nav {
        /* 固定导航栏不动 */
        position: static;
    }
</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.editormd %>"></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,
            searchReplace: true,
            emoji: true,
            taskList: true,
            tocm: true,         // Using [TOCM]
            tex: true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart: true,             // 开启流程图支持，默认关闭
            sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
            htmlDecode: "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启   
        });
    });
</script>