知源笔记

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

无忌 发表于

Markdown 转换器

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

重构 marked

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

  • 增加转换时的异常捕获
    • 增加异常发生的时间
  • 选项设置, 主要将 gfm, smartypants 这两个设置为 true. 增加 wxFmt 选项, 为了导出微信公众号格式.
  • 文本对齐功能
    • aligntext rule 需要优化
  • 展示拼音功能
  • 标题样式主题
  • 快捷键插入图片 F6
  • 微信模式下, OSS 返回限制大小的图片 x-oss-process=style/wx
    • 压缩命令需要更健壮一些
  • 增加更多不同样式的 blockquote, TIP, WARN, DANGER
  • 支持 emoji 表情
  • 自动格式化, 包括中英文空白, 行末空白, 标点符号使用 (全角/半角, 引号)
  • 数学公式, 转图片
  • Markdown 语法检查
  • 拼写检查
  • 字数统计
  • 目录 TOC
  • 超链接转脚注功能
  • 左侧与右侧视图同步滚动，进一步提升使用体验, 参考 https://github.com/hadeshe93/irm-markdowner

数学公式

数学公式显示方案, 采用更高效的 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 版.

  • 演示文件: kitchen-sink.html
  • 演示文件: ace-builds/textarea/editor.html
  • 快捷键的定义和管理全在 lib/ace/commands 文件夹中.

全屏模式

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

  • 全屏也支持弹出对话框

快捷键

导出微信公众号网页

方案调研

  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

参考文献