制作一款与优快云的markdown相似的离线编辑器

优快云的markdown编辑器, 是我目前所接触过的最好的, 功能最全的编辑器, 支持mermaid图表, LaTeX 数学公式.
那么, 有没有离线的, 免费的, 而且功能也很全的markdown工具呢?
答案是:
有, 但是只有程序员才会用

以下教你如何使用开源js制作一个离线编辑器.

思路

1. 生成一个html格式的markdown编辑器 (js + index.html)
2. 将其中的js放在CDN上, 或github上
3. 将markdown的编辑内容嵌在在index.html中

每次打开html时, 加载其中的markdown内容.

https://github.com/wzjwhut/markdown-editor
demo https://wzjwhut.github.io/markdown-editor/

下载开源markdown-plus

这公司开源markdown-plus, 是为了让更多的人购买他的APP.
https://github.com/tylingsoft/markdown-plus
按照文档编译运行

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

定制

这开源的很多配置都是写死的, 没有提供配置接口.有些不友好的地方

1. 两个空格+换行, 才能换行.
2. [TOC]是从2级标题开始生成.
3. 没有文件保存的功能
4. js文件没有压缩, 太大了
5. 使用webpack2, 现在都webpack4了, 资料都不好找了.
6. <p>默认是两端对齐, 需要改成左端对齐

TOC从1级标题开始生成

toc参数说明
https://github.com/tylingsoft/markdown-it-github-toc

修改TOC参数
node_modules\markdown-core\src\engine.js
修改tocFirstLevel, tocLastLevel

case 'github-toc':
          this.mdc.use(markdownItGithubToc, {
   
   
            tocFirstLevel: 1,
            tocLastLevel: 3,
            tocClassName: 'toc',
            anchorLinkSymbol: '',
            anchorLinkSpace: false,
            anchorClassName: 'anchor',
            anchorLinkSymbolClassName: 'octicon octicon-link'
          })
          break

允许\n换行

参数说明
https://github.com/markdown-it/markdown-it#api

修改node_modules\markdown-core\src\index-node.js, 加上breaks参数

const options = {
   
    html