笔者自 2006年从大学毕业至今一直从事软件开发工作,具有十余年的技术写作经历,也用过国内 CSDN,腾讯云社区,SegmentFault,掘金,博客园等多个技术社区的博客编辑器。今天就来聊聊 51CTO 社区最近新推出的悟空编辑器。
国内有些技术社区的 markdown 编辑器,整个屏幕分为左右两部分,左边是 markdown 源代码编辑,右边能看到实时预览的结果。这样设计的好处是书写 markdown 之后能立即看到渲染的结果,缺点是屏幕可编辑的界面只剩一半大小了。
笔者个人更喜欢悟空编辑器这种全屏编辑的风格。整个编辑器界面没有任何多余的元素,整洁清爽。
![](https://img.haomeiwen.com/i2085791/30d8e66449a2196e.png)
当我们输入 markdown 源代码比如“# 这是一级目录”时,源代码会自动渲染出对应的一级标题的效果,并自动提取到嘴边的目录区域,这个效果相当赞,让写作人员避免了手动生成目录。
![](https://img.haomeiwen.com/i2085791/338e019dffcd9a0f.png)
作为程序员来说,博客编辑里的代码插入功能当然是重中之重的。悟空编辑器对代码插入的支持非常全面。
输入 “```javascript” 再按回车:
![](https://img.haomeiwen.com/i2085791/b6852bcc4f29f91d.png)
就出现了下图的输入光标,然后我们就可以粘贴代码进去了:
![](https://img.haomeiwen.com/i2085791/64a5f17e11e8f338.png)
自动支持行数显示和代码高亮,并且可以在多种主流编程语言之间切换:
![](https://img.haomeiwen.com/i2085791/2a7af4a08b64a3b1.png)
当代码行数比较少时,还可以选择行内代码的形式来显示,让文章看起来更加美观。
![](https://img.haomeiwen.com/i2085791/60b4d72c0d6d3065.png)
借助文本上标工具,我们能轻松输入 x 的平方 + y 的平方 = z 的平方这类公式。
表格是另一种程序员技术博客里经常用来对不同技术方案进行全方位比较的呈现方式。
悟空编辑器的表格编辑功能一目了然,让程序员无需花脑筋去记忆枯燥的表格 markdown 源代码。
![](https://img.haomeiwen.com/i2085791/667021e180f57b91.png)
选中不同的表格区域,右键菜单的选项各不相同,看来编辑器的设计者是用心来打磨过这个表格编辑功能的。
![](https://img.haomeiwen.com/i2085791/8538b69467b809f4.png)
国内大部分技术社区的博客编辑器,只能以只读的方式插入图片。而悟空编辑器在插入图片后,还支持对图片进行一些简单的编辑操作,这个功能让我眼前一亮。
![](https://img.haomeiwen.com/i2085791/576d24d2ad6d886e.png)
对于耕耘于人工智能和算法研究领域的程序员来说,Tex 公式更是一个不可或缺的功能。
![](https://img.haomeiwen.com/i2085791/6b9f7413d25cb588.png)
我们在了解了 LaTex 语法之后,就可以在悟空编辑器里,书写出类似下图这种漂亮的数学公式,看起来是不是很酷?
![](https://img.haomeiwen.com/i2085791/82279ffa6a08b825.png)
编辑器的底部,还贴心地显示了自动保存的时间戳和当前已经书写了的文字数目,一目了然。
![](https://img.haomeiwen.com/i2085791/afcc4e6b86579207.png)
因为笔者也是一位前端开发人员,出于职业习惯,打开了 Chrome 开发者工具,发现悟空编辑器是基于 Vue 实现的。
感谢我的同行们,给广大的 51CTO 用户提供了一款如此界面清爽而又功能强大的博客编辑器。
![](https://img.haomeiwen.com/i2085791/c6d29ab39ec0f677.png)
更多Jerry的原创文章,尽在:"汪子熙":
![](https://img.haomeiwen.com/i2085791/97c4752c0e619c44.png)
网友评论