专栏首页mall学习教程再见 Typora!这款 Markdown 神器绝了!

再见 Typora!这款 Markdown 神器绝了!

对于创作平台来说内容编辑器是十分重要的功能,强大的编辑器可以让创作者专注于创作“笔”下生花。而最好取悦程序员创作者的方法之一就是支持 Markdown 写作,因为大多数程序员都是用 Markdown 来写文章。

Markdown 作为程序员写作的心头爱,有很多优点:

  • 通过语法实现排版,不需要点选手动设置样式
  • 快速实现复杂内容,如:代码块、超链接、公式等
  • 让创作者有更多时间专注于内容

但,同样的也有些缺点:

  • 有一定的学习门槛,对于非程序员不太友好
  • 看原文档就像看“代码”,预览效果需要工具或编辑器支持

那有没有能够即保留 Markdown 带来的便利,同时又降低门槛的办法呢?大多数老玩家会脱口而出:Typora

Typora 直接使用完全没有问题,但由于它没有开源。如果想在自己的项目实现类似的 Markdown 编辑器,就需要另寻方案了。

如果你正在寻找功能强大、易于接入、所见即所得的 Markdown 编辑器、组件、插件,就请花 5 分钟读完本文!

接下来 HelloGitHub 带来的开源项目完全满足上述需求。Milkdown 一款高颜值+自由(插件)的所见即所得,集合 Markdown 编辑器、组件、插件于一身的开源项目。

https://github.com/Saul-Mirone/milkdown

你想要的功能它都有,不要的功能也可以通过删减插件,减少体积。插件的设计思想+完善的中文文档,让你分分钟定制出最适合自己的 Markdown 编辑器!

下面跟着项目作者一起来感受 Milkdown 的魅力吧。

一、上手

下面提供了 2 种方式,可直接体验:

在线尝试:https://milkdown.dev/#/online-demo VS Code 插件:https://marketplace.visualstudio.com/items?itemName=mirone.milkdown

1.1 功能展示

方便的编写表格:

直接粘贴和复制 Markdown 文本:

甚至协同编辑:

双栏 Markdown 编辑器很常见。但 双向绑定 的 Markdown 编辑器,目前仅此一家:

功能方面就介绍这么多,下面用 Milkdown 轻松实现个编辑器。

1.2 第一个编辑器

Milkdown 的核心以及各种插件都是独立的 NPM 包,可以直接通过 NPM 来进行安装。

npm i @milkdown/core @milkdown/preset-commonmark @milkdown/theme-nord

上手也十分简单:

import { Editor } from '@milkdown/core';
import { nord } from '@milkdown/theme-nord';
import { commonmark } from '@milkdown/preset-commonmark';

Editor
  .make()
  .use(nord)
  .use(commonmark)
  .create();

我们先使用 make 来初始化编辑器,然后使用 use 来加载插件,最后使用 create 来创建编辑器。

1.3 丰富的插件

插件是 Milkdown 的核心,它本质上就是一个插件加载器,一切功能都是通过插件来提供的。表格是一个插件、主题是一个插件、甚至一行简单的文本也是一个插件。

目前官方已经提供了许多插件,确保可以开箱即用。下面仅列举了部分插件:

名称

描述

plugin-clipboard

添加 markdown 格式的复制粘贴能力

plugin-cursor

添加 drop 和 gap 光标

plugin-listener

添加监听器支持

plugin-collaborative

添加协同编辑支持

plugin-table

添加表格语法支持(已经包含在 gfm 中)

plugin-prism

添加 prism 用于支持代码块高亮

二、技术栈

Milkdown 基于下面的工具实现:

  • Prosemirror:一个用于在 web 端构建富文本编辑器的工具包
  • Remark:正确的 Markdown 解析器
  • TypeScript:以 TypeScript 编写
  • Emotion:用于构建样式的强大的 css in js 工具
  • Prism:代码块支持
  • Katex:高性能的渲染数学公式

富文本编辑器本身是一个天坑。虽然 ContentEditable 看起来很美好,但实际用起来就会发现问题层出不穷。因此我们基于 Prosemirror 来实现富文本编辑器。因为它足够成熟、久经工业的锤炼,并且拥有良好的架构和 API 设计。

三、架构

Prosemirror 的核心逻辑其实类似于 React,它通过一种函数式的数据映射来体现编辑器的 UI 和内部状态的关系,如图:

编辑器通过 EditorState 来保存当前状态,并由 EditorState 产生出 EditorView,即 UI 视图。 用户在 UI 视图上进行的操作最终会产生 DOM event,例如:input 事件、click 事件。DOM event 事件会产生 Transaction,代表了对 State 的修改,类似于 Redux 或 Vuex 中的 Action。 这些 Transaction 会与原来的 EditorState 进行计算,产生新的 EditorState,如此循环。

Prosemirror 通过这样的方式将编辑器中的每个状态以 EditorState 的方式保存了下来,它是一颗树状结构。而有一点编译原理基础的朋友都知道,任何编程语言都有对应的 AST(抽象语法树)。因此我们需要的就是建立 Prosemirror 中的 EditorState 与 Markdown 的抽象语法树之间的联系。 Remark 完美契合我们的需求,因为它有设计良好的 AST,并且易于扩展自己的语法。

这样一来 Milkdown 的架构也逐渐清晰:

Markdown <-> Remark AST <-> Prosemirror State <-> UI

四、结语

在开始这个项目前,我尝试过各种各样的 Markdown 编辑器,但没有找到一款特别满意的。因为它们都是闭源,而且功能由开发商提供,有的功能太过于臃肿、有的又太过简单。 既然这样,我索性自己做一款能够轻松定制功能,非程序员也能轻松使用的 Markdown 编辑器,也就有了大家看到的 Milkdown。

希望开源的 Milkdown 让用户有更自由的选择,打破 Markdown 编辑器的“垄断”。开源不易如果 Milkdown 对您有帮助,也请给个 Star✨。

https://github.com/Saul-Mirone/milkdown


微信8.0将好友放开到了一万,小伙伴可以加我大号了,先到先得,再满就真没了

扫描下方二维码即可加我微信啦,2021,抱团取暖,一起牛逼。

文章分享自微信公众号:
macrozheng

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!

如有侵权,请联系 yunjia_community@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 再见 Typora!这款 Markdown 神器绝了!

    对于创作平台来说内容编辑器是十分重要的功能,强大的编辑器可以让创作者专注于创作“笔”下生花。而最好取悦程序员创作者的方法之一就是支持 Markdown 写作,因...

    终码一生
  • 再见 Typora,这款开源 MarkDown 编辑器更香!

    MarkDown编辑器中优秀者众多,但是使用顺手,简洁大方符合个人审美的并不是很多,Typora算一个,个人也比较喜欢,但是作者最近也开始收费,毕竟优秀的产品需...

    终码一生
  • 最好用的文字与公式编辑器,这套数学笔记神器送给你

    在我们学习生活中,经常需要记很多笔记,或者发发个人博客网站,那么工具就必不可少了。一般情况下,我们都钟爱使用贼简单、贼优美的 Markdown 标记语言,它的学...

    机器之心
  • win10 小而美的软件

    强悍、 轻巧、 干净。界面简单易用,没有纷繁复杂的功能,没有“全家桶”服务,没有广告的骚扰。偶尔提示你阻止下某某游戏中心的安装,或者某某软件的弹窗。或者在后台默...

    用户2870857
  • 神器 MdNice !

    作为程序员,我们经常会写一些开发文档,Markdown作为一种轻量级标记语言,非常容易学习和使用。看看Github上面的开源项目文档,很多都是用它来写的,就知道...

    macrozheng
  • 再见 Typora!这个开源的 Markdown 编辑器爱了!

    早期我刚开始写文章的时候,用的富文本编辑器,排版也非常的繁琐,现在回想起来当初的 blog 用富文本编辑器写出来的感觉看上去真是不太美观,直到我慢慢接触新事物后...

    杰哥的IT之旅
  • 再见 Typora !这款开源的 Markdown 神器界面更炫酷,逼格更高!

    MarkText号称下一代Markdown编辑器,是一款简单易用的开源编辑器,支持Linux、MacOS和Windows系统。MarkText在Github上已...

    macrozheng
  • 这款Markdown神器,要收费啦!

    11月23日,Typora 正式发布 1.0 版本,正式版开始收费了,定价14.99美元。不过,Beta版本还是可以继续免费使用的。

    程序员大彬
  • 推荐一款程序员神器!

    "这篇文章之前推送过一次,但是最近有人在问程序员用什么写文档比较好,所以再推一次,希望对大家有帮助!"

    龙哥
  • Typora + PicGo + Gitee/GitHub 免费搭建个人图床

    写了将近一年多博客,之前半年都是用 富文本 的方式来写博客。直到遇到了一些博友,听说他们都是用 Markdown 格式来写博客。结果,我就放弃了富文本模式,见仁...

    Lucifer三思而后行
  • 横空出世,世界排名第 1 写作语言来了,到底有多牛逼?

    对,你没有听错,本文要说的就是目前最牛逼的写文档的语言:Markdown,想必很多朋友已经接触过了,已经见识到了他的威力。

    路人甲Java
  • 修改Markdown神器[Typora]的主题样式

    http://theme.typora.io/theme/OrangeHeart/

    悟空聊架构
  • Typora 收费,这款开源 Markdown 神器值得一试

    点击上方蓝色字体,选择“设为星标” 回复”学习资料“获取学习宝典 Typora 相信大家都太熟悉了,这绝对是使用人数最多的一款 Markdown 编辑器。 想...

    猿天地
  • 推荐一款神器 ! ! !

    "这篇文章其实很久之前推送过一次,但是最近有人在问程序员用什么写文档比较好,所以再推一次,希望对大家有帮助!"

    谭庆波
  • 爱了!爱了!Markdown 必备组合神器!

    程序员应该都了解 Typora 是专注于编写 Markdown 格式的编辑软件,使用方便,支持多种格式导出。

    Python数据科学
  • 代码即格式:你用过这些高效工具吗?

    我在工作中也用到一些使用起来非常高效的工具,今天以 “代码即格式” 为主题,跟大家介绍下两个高效工具。

    张乘辉
  • [工具推荐] Typora 1.0.4中文学习版

    Typora windows是好用极简免费的跨平台 Markdown 编辑器,支持markdown的标准语法,同时Typora中文版还支持动态预览功能,一键预览...

    科控自动化
  • Typora+PicGo+Gitee搭建博客写作环境

    总之,记笔记的软件五花八门,而程序员作为特殊的群体,他们热衷于钻研技术、分享技术,因此免不了写文章发布在各类博客平台。为了同非专业人士区分开来,程序员通常采用M...

    Simon郎

扫码关注云+社区

领取腾讯云代金券