基于 ACE 打造个性化 Markdown 编辑器

Markdown 转换器

Markdown 转换器是以 Marked 为基础进行的二次开发, 主要的流程如下图所示.

重构 marked

2019-10-06 (星期日), 基于 marked v0.7.0 (git commit: 26ae990) 版本进行重构, 主要改动如下:

数学公式

数学公式显示方案, 采用更高效的 katex, 需要在上面的六个模块中分别增加相关代码. 行内公式用单个美元符号, 行间公式用两个美元符号括起来. 注意: 需要在 text inline rule 中, 增加 $ 字符.

行内公式也是可以的哦! 支持宏定义. 比如说, 设 a,b,c∈Ra,b,c\in\R, 那么 a2+b2=c2a^2+b^2=c^2.

∫abf(x)dx=F(b)−F(a)\int_a^bf(x){\rm d}x=F(b)-F(a)

∑i=1ni2=16n(n−1)(n−2)\sum_{i=1}^ni^2=\frac16n(n-1)(n-2)

代码高亮

代码自动高亮, 采用 highlight.js 解决方案.

for(int i=0; i<n; i++) {
    sum += i;
}

Markdown 编辑器

文本编辑器

文本编辑器, 选用 Ace 的 node 版.

全屏模式

全屏编辑更酸爽, 好好写博客, 多沉淀内容.

快捷键

导出微信公众号网页

方案调研

  1. markeditor 1.x 版本, 付费版提供了导出功能. 缺点: 不方便定制, 而且 Markdown 文本编辑体验一般, 当初购买的原因就是为了公众号排版.
  2. https://github.com/lyricat/wechat-format, 作者称用三小时打造的工具, 详情参见花三小时写这个工具，只为一分钟拯救公众号排版. 本质是用浏览器复制功能, 但需要将部分样式改为 style. 体验或直接使用, 可以用 WeChat Format 在线版.
    • 仅源码需要读取一遍
  3. 嫌微信公众号排版太丑？这里让你一步到位, 在线体验地址: https://md.ironmaxi.com, 阅读源码 https://github.com/hadeshe93/irm-markdowner
  4. 大神小胡子哥的 https://github.com/barretlee/online-markdown
  5. 阅读源码: markdown-nice, 线上体验地址: https://mdnice.com

参考文献

相关推荐