说明

demo

https://mhlx.github.io/markdown-editor/

changelog(2019-07-06)

1. 增加了主题模式，可以设置编辑器的主题、顶部工具栏、底部文字提示、搜索框、工具条和光标辅助框的颜色，点击工具栏的齿轮图标进入
2. 增加了TOC，在PC上通过点击工具栏的书本图标进入，在手机端在编辑器页面向右滑动进入
3. 手机端现在通过编辑器页面向左滑动预览

下载

https://github.com/mhlx/markdown-editor/releases/latest

Github

https://github.com/mhlx/markdown-editor

文档

https://www.qyh.me/document/markdowneditor

支持的markdown语法

粗体

内容
内容

斜体

内容
内容

链接

link text
link text

图片

狗肉

狗肉

段落

有序

1. one
2. two

无序

• A list item.
• bar

嵌套

• Abacus
  • anser
• Bubbles
  1. bunk
  2. bupkis
     • bar
  3. burper
• Cunning

引用

内容

水平线

表格

锚点

内容

脚注

Markdown^[1]

代码

public static void main(String [] args){}

public static void main(String [] args)
{
}

public static void main(String []args){
     
}

KaTeX

通过KaTeX来渲染LaTex

Inline:

Block:

到这里了解更多

mermaid图表

流程图

graph LR
    A-->B

时序图

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!

甘特图

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d

具体的使用方法请看这里

感谢

1. 使用CodeMirror作为编辑器
2. 使用fontawesome美化图标
3. 使用highlightjs高亮代码
4. 使用jQuery简化dom操作
5. 使用sweet2alert作为弹窗提醒
6. 使用markdown-it来渲染markdown
7. 使用jQuery File Upload来上传文件
8. 使用turndown将html转化为markdown
9. 使用mermaid渲染流程图、时序图以及甘特图
10. 使用morphdom来path更新预览
11. 使用katex渲染数学公式
12. 使用simplebar美化滚动条

1. 内容 ↩