关于所见即所得 Markdown 编辑器的讨论

本贴最后更新于 1828 天前,其中的信息可能已经时移俗易

在 GitHub 上搜索 “Markdown editor”,会发现几乎所有流行的 Markdown 编辑器项目都会有被人提类似这样一个特性请求:

能否像 Typora 那样进行实时渲染?

这是一个有趣的现象,但几乎所有的项目都没实现,我翻了这些项目下面的 issue 讨论,作者们大致认为:

  • 所见即所得违反了 Markdown 设计用意
  • 设计上没有保证一致性,比如列表、块引用和标题就无法展开标记符;有的操作只能依赖鼠标或者快捷键,比如表格扩展行列
  • 实现工作量较大,还有优先级更高的任务需要去做
  • 太难了

其中 VNote 提出的“折中方案”,即图片、图表和公式进行实时渲染,其他元素则进行 Markdown 语法高亮。这个方案看似折中,但实则更严重地破坏了一致性,会让用户更容易分心。老外们的项目似乎很看重“设计一致性”,只要逻辑上有点瑕疵他们都不接受。而国人大部分(包括我)都是实用主义者,用着爽就行,管那么多干啥。

Vditor 虽然还不那么流行,但是也被提过。本来我和 @Vanessa 是想做好所见即所得就行了,这样不熟悉 Markdown 的人也能用。当我翻遍了现有 Markdown 编辑器项目相关讨论后,我觉得还是很有必要去实现保留标记符实时渲染模式的,虽然工作量巨大,但是这样会对熟悉 Markdown 的人更加友好。目前大致的计划是在 v3 中进行实现,估计得半年后了。

最后,从某个方面也再次印证了那个被重复一万次的设计问题:用户觉得好就真的是好的吗?

也许是吧,因为离开了社区的支持,作者个人再怎么努力也是白费的……

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • hjljy 1 赞同

    工具制作出来不就是给人用的么?站在使用者的角度上来说:这个工具怎么实现的,我并不关心,对我而言,好用就是好用,不好用就是不好用。

    1 回复
  • 我个人是不太习惯 typora 那种编辑方式的。最主要的一点就是修改起来不够优雅,需要来回调整光标。表格就更别提了。

    相比之下,我还是习惯 side-by-side 这种传统编辑方式。还有那种在渲染格式的同时保留 markdown 标记符的编辑方式也还可以接受。

    1 回复
  • 88250

    你后面说的应该是 Markdown 语法高亮吧?这种方式确实比较受欢迎,等有空 Vditor 也会进行支持。

  • iTanken 1 赞同

    用过所见即所得后还是感觉 编辑&预览 更高效

  • Typora 确实挺好用的,我用了好几年了

  • JssDream

    支持doge 坐等大佬

  • DevYui

    Typora 其实也是用前端写的。

    1 回复
  • 88250

    嗯,通过开发者工具大概浏览了下 Typora 的代码(虽然被压缩过,但是格式化后还是能看的),Markdown 引擎部分应该是直接用 JavaScript 开发的。

    话说编程语言的一大趋势是不分前后端,比如 JavaScript 可以通过 Node.js 跑在服务端上、golang 可以通过 GopherJS 编译成 JavaScript 跑浏览器上、很多后端语言也可以编译为 WASM 跑浏览器上。

    所以对于很多应用产品而言,用什么语言实现已经越来越不重要了,重要的是如何组合工具,换来 1+1 > 2 的价值。

    1 回复
  • DevYui

    Shift + F12?

    1 回复
  • DevYui

    D 大,很晚了。记得早点睡,我先去睡了。晚安。

  • 88250

    菜单上可以打开开发者工具,Typora 用了零宽空格字符处理一些场景,这个技巧值得借鉴。作者确实挺厉害的,大量细节处理都非常到位,Vditor 也会加油完善。

  • 这其实也是如今快餐文化下,文学/影视/游戏产业存在的问题,多数受众只管自己看的爽玩的爽,才不在乎什么艺术,什么世界观。为了能赚到更多的钱,从业者也慢慢变得浮躁起来,忘记了初心,干货也越来越少了。。

  • yoss

    VNote 的 README 是这样评价 Typora 的:

    类富文本实时渲染模式,代表软件是 Typora,其缺点是矫枉过正,和 Markdown 的设计理念背道而驰

    为黑而黑,Typora 对 Markdown 的支持我觉得是最好的,没有之一。

    1 回复
  • 88250

    我是最近才开始用 Typora 的,主要是为了学习研究其功能。Typora 的 Markdown 相关配置开关确实很优秀。

  • losky
    该回帖仅作者和楼主可见
    1 回复
  • 88250
  • “估计得半年后”

    结果转眼就实现了。真香 [doge]

    1 回复
  • 88250

    错误评估工时的典型案例 wulian

  • roland100

    用户想给马车加一匹马。。他们只是想不到可以制作一辆轿车。

  • Kanji-bug

    https://github.com/marktext/marktext

    还有是否可以粘贴图片的时候,通过 base64 来保存?

    marktext 的设计特别优秀,我觉得表格设计可以参考下它的

    image.png

  • baozebing

    提个需求:图片上传支持自定义函数

  • qingyun1029

    请问“可通过修改 index.less 中的变量对主题颜色进行定制”说的,我修改了 index.less 后如何打包呢?

    或者如何覆盖一些默认样式?

    谢谢!

请输入回帖内容 ...

推荐标签 标签

  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 649 关注
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    8788 引用 • 40094 回帖 • 134 关注
  • 新人

    让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
    新手上路,请谨慎驾驶!

    52 引用 • 228 回帖
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    34 引用 • 467 回帖 • 751 关注
  • Typecho

    Typecho 是一款博客程序,它在 GPLv2 许可证下发行,基于 PHP 构建,可以运行在各种平台上,支持多种数据库(MySQL、PostgreSQL、SQLite)。

    12 引用 • 67 回帖 • 441 关注
  • 爬虫

    网络爬虫(Spider、Crawler),是一种按照一定的规则,自动地抓取万维网信息的程序。

    106 引用 • 275 回帖
  • 七牛云

    七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。

    28 引用 • 225 回帖 • 148 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 366 关注
  • JSON

    JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    52 引用 • 190 回帖 • 1 关注
  • Unity

    Unity 是由 Unity Technologies 开发的一个让开发者可以轻松创建诸如 2D、3D 多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎。

    25 引用 • 7 回帖 • 150 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    107 引用 • 295 回帖 • 1 关注
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目,是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台,为开发者提供便利的 API 接口来调用服务,让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 488 关注
  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    83 引用 • 37 回帖
  • 学习

    “梦想从学习开始,事业从实践起步” —— 习近平

    170 引用 • 513 回帖 • 1 关注
  • GAE

    Google App Engine(GAE)是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 782 关注
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统,是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议,并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。

    948 引用 • 943 回帖
  • 钉钉

    钉钉,专为中国企业打造的免费沟通协同多端平台, 阿里巴巴出品。

    15 引用 • 67 回帖 • 322 关注
  • 分享

    有什么新发现就分享给大家吧!

    247 引用 • 1793 回帖 • 1 关注
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    200 引用 • 120 回帖
  • Flume

    Flume 是一套分布式的、可靠的,可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 644 关注
  • AngularJS

    AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 484 关注
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统(DBMS),它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的,并于 1988 年推出了第一个 OS/2 版本。

    21 引用 • 31 回帖
  • Excel
    30 引用 • 28 回帖
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 165 关注
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 637 关注
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念,推广开源项目,为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架,基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 398 关注