580a0f23e33fa5b533b296cb29ebc93c.png

特性

  • 支持“标准”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安装包

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

fd134bba92b1fde6aa10c1224d6c751d.png

2.移植文件

1.将压缩包解压之后放到 主题文件夹的source->libs目录中。可以将文件夹定义为你想要的名字。我这里改为editorMd

7b5f5673868a502b6d6bb0187225a808.png

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文件夹下，可以修改文件名。

15ed5c9c0389c4942100ec1f51c945c7.png

3.导入editor的css和js

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

83c38ac0f25ced0df093317577702c0d.png

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

效果如下

a4f6b687f42f6c850ca2b0de8d0eb42e.png

13a55f59b55e1bc67784d519d9341636.png
Logo
AtomGit 开源协作平台测评赛

瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手

更多推荐

ADS1292R 使用 过程 心电图 高精度ADC模块

文章目录1 Fundamentals ofPrecision ADC Noise Analysis 精密模数转换器噪声分析基础1 Fundamentals ofPrecision ADC Noise Analysis 精密模数转换器噪声分析基础https://www.ti.com.cn/cn/lit/wp/slyy192/slyy192.pdf?ts=1600659610730&ref_u

avatar 开放原子开发者工作坊
cover

实现一个家庭安防与环境监测系统（一）

avatar 开放原子开发者工作坊

【cf】Codeforces Round #774 (Div. 2) 前4题

题目A. Square Counting 简单数学题目大意题解代码B. Quality vs Quantity 排序题目大意题解代码C. Factorials and Powers of Two 状态压缩dp+位运算题目大意题解代码D. Weight the Tree 树形dp+dfs题目大意题解代码E. Power Board 看起来像是数论？许多年没打cf了，偶尔打了一盘，恢复紫名了。A. S

avatar 开放原子开发者工作坊