主机参考
| 主机参考：VPS测评参考推荐/专注分享VPS服务器优惠信息！若您是商家可以在本站进行投稿，查看详情！此外我们还提供软文收录、PayPal代付、广告赞助等服务，查看详情！ |
| 我们发布的部分优惠活动文章可能存在时效性，购买时建议在本站搜索商家名称可查看相关文章充分了解该商家！若非中文页面可使用Edge浏览器同步翻译！PayPal代付/收录合作 |
相关学习推荐：微信公众号开发教程
公元2019年，微信公众号排版功能薄弱一直被运营者诟病，Xium、135编辑器等工具被分为
但无论是微信原生工具还是其他编辑器，创作者都必须将有限的创作经验延伸到版式设计上。
Markdown 这个排版灵丹妙药，已经到了历史性的时刻。
1.简介 1.1 什么是Markdown？
Markdown 是一种输入量极少、学习成本极低的排版语法。
获取创建文本所需的所有格式，包括标题、引号、粗体、链接、图像、代码片段和公式。
1.2 如何与微信公众号集成？
微信公众号不支持这么好的格式语法。
1.3 什么是Markdown Nice？
一个写完就能正确排版的开源Markdown编辑器。 您可以将其复制并粘贴到您的微信公众号。
所以呢？ 这就是全部吗？
当然不是。 可爱的宝宝，它还有什么特点呢？
支持图床、脚注、代码和公式。 支持8种布局主题和7种代码主题。 它支持自定义样式，您可以提交您的主题供人们欣赏。 除公众号外，还支持知乎、掘金、博客园、CSDN。 等平台的时候我看起来好酷
这么多好用的功能在我面前，你还在等什么？
地址：https://mdnice.com
让你的微信布局变得很棒
2.短信
我以为你还没读过呢。
咳咳...
别小看我，好孩子，我在公众号上使用 Markdown 排版。为了做到这一点，我和微信公众号编辑奋斗了半年左右，才达到现在的结果。
你想听我怎么战斗吗？让我说我想说的话！
2.1 战斗序言
微信公众号编辑器诞生于百度FEX前端团队的开源ueditor项目。 这是我的宝宝通过窃取如图所示的网页代码发现的。
>
ueditor是一个富文本编辑器，所以我们即将面临的是一场markdown->富文本转换之战。 在开源和软件世界中，这场转型战争有许多伟大的实现。 示例：
Web端：editor.md、mavonEditor PC端：typora、MWeb
但是上述工具存在问题。 CSS样式与富文本融合不好，适配微信编辑器。 还有关于国内其他主要平台的富文本编辑器。
那么有没有什么工具可以解决这个问题呢？其实有：
Web端：md2all、微信-格式 浏览器插件：markdown-这里
Markdown Nice is一个由许多开源技术组成的开源项目，包括： :
React：Facebook 开源的 JS 视图层框架 markdown-it：Markdown 转换富文本解析器 Juice：将类选择器转换为内联样式的 CSS 工具 codemirror：Web 代码编辑器 ant- design：React UI 组件Library mobx：状态管理库highlight.js：代码高亮库MathJax-node：图像库 表达式为axios、ali-oss、qiniu-js等
注：下面讨论上面提到的一些开源库。 单击此处了解开源库的具体功能。
拿到以上技术后，我向微信编辑器宣战，打响了战斗的第一颗子弹。
2.2 战斗第一枪：代码主题
2018年之前，微信公众号根本不支持代码块。 目前的支持也很单一，并且受到代码字体大的困扰。
这就是为什么我找到了highlight.js代码高亮工具来帮助你解决单一代码主题问题。
经过一定的审核，最终选定atom-one-dark、atom-one-light、monikai、GitHu。b.共有7种代码风格可供选择：vs2015、xcode、微信代码主题。
微信代码主题不属于highlight.js范畴，因此其结构必须从微信公众号编辑器源码中获取。 下面两张图展示了如何获取。
Highlight.js 与 markdown-it 解析器配合使用，因此该工具有两个 markdown 解析器用于解析微信。 它们分别是代码主题和其他代码主题。 源码参考。
除了上述问题外，很多技术公众号代码还存在多行显示问题，因为每行代码太长。
可以使用以下 CSS 代码解决此问题。
前代码{display: -webkit-box ! important}复制代码
对比结果为： 图：
对于那些使用 Markdown Nice 的人来说，你现在可以编写更漂亮的代码。
2.3 战斗第二枪：上传照片
没有照片算什么好文章
（有技术人员说“我没有”）
好宝贝是第一个使用SM.MS绘图床的公司，该床由一家大公司运营和维护。 我非常感激！
虽然用这个图片平台可以上传照片，但是如果把照片粘贴到微信编辑器里，失败率会很高，如下图（微信（看得我很想踩一下）编辑）。
真是{喜闻乐见|hē hē hē hē}没错！
为了解决上述问题，Markdown Nice就是定制的阿里云和七牛云镜像床。 当您购买阿里云、七牛云服务时，您可以使用自己的镜像床。
但是！ 允许用户配置自己的设置。 有配置文档，但整个配置过程非常复杂和痛苦。
So Nice Baby使用自己的账号搭建了自己的图床，设置保留期为1天，并提供mdnice图床进行临时排版。 此时该工具的图片上传支持为：
影像床费 有效期 失败率 mdnice 免费1天 低SM.MS 免费长高 阿里云参考定制 低 七牛云 10G 免费定制 低
在这场图床之战中，最大的困难是需要阅读阿里云OSS和七牛云KODO文档并使用那些文档，没错。 介绍开源工具包ali-oss和qiniu-js。
这还包括 FormData、文件对象、base64 和 BLOB 以及源代码引用之间的神奇转换。
总之，这场战斗非常有趣。
2.4 战斗第三枪：公式
对于微信公众号布局来说，公式是一场噩梦。
因为微信编辑器做了三件事：
不支持编辑公式，也不支持HTML和CSS生成的公式。 无法导入字体且不支持 SVG，因此放置字体会导致错误。
此时唯一可能的解决办法就是将公式转换为图片，并将图片直接发布到公众号上。 尼斯宝贝觉得这个主意很完美。
但是我该怎么办...
我突然想到了codecogs的想法，一个朋友推荐的转换网站。 该网站允许您转换任何公式。 将其转换为 PNG 图像并提供可访问的链接。
但是，由于图像稳定性问题，该链接无法直接使用。 可能会出现像第二个游戏那样图像粘贴失败的悲惨情况。
我该如何解决这个问题？如果我可以构建自己的 PNG 图像转换服务公式，那就太好了。 有这样的开源库吗？ 一个 MathJax- 节点就足够了！
所以 Nice Baby 构建了自己的后端服务，封装了用于前端调用的 RESTful 接口以及将数学方程转换为图像的能力。 经过测试，完全可以使用。 粘贴后，您可以调整图像大小以适合您的布局。
在转换大量公式时，前端合理利用异步请求，并行执行，而不是一一转换。 它的性能已经达到了2秒可以转换10个表达式的地步，对于表达式可以得到充分利用。 排版。
2.5 战斗中的第四枪：微信外部链接脚注
众所周知（如果你不知道，你应该知道），微信是不支持外部链接的。 //mp除.weixin.qq.com/合法链接外，其他链接显示后将被自动删除。
添加外部链接的唯一官方方法是阅读全文。 当然，您也可以将链接本身直接放置在文本中或创建二维码图像。
好宝贝提供了将微信外部链接转换为脚注的方法来解决这个问题。 是不是非常优雅呢？
链接和脚注的区别如下。
链接：[文本]（链接“文本”） 脚注：[文本]（脚注描述“脚注名称”） 复制代码
这还包括常见问题。 这就意味着很多作者在公众号上的文章本来在其他平台发表的时候是有链接的，但是在这里排版的时候却要一一改掉，这就很混乱了。
非常好，我又做了一个小改进。 这意味着，当您粘贴文章时，它会自动检测是否有外部链接，并询问作者是否要一键将其转换为脚注。 这意味着您不必手动更改它。 我不喜欢！
2.6 战斗概述
与微信公众号编辑的竞争是一个非常有趣的过程。 除了上面列出的问题之外，还有很多细节需要注意。 我不会在这里逐一解释。 如果您有兴趣，请阅读源代码。
3.说说3.1与战斗无关的设计概念
对于大多数人来说，内容比布局更重要，布局比设计更重要。
内容是最重要的，因为它是吸引读者的核心。
对于排版和设计的比较，作为一名曾经的微信美术编辑，我对排版的经验越多，就越意识到文章的效果并不在于多余的花边或装饰。
3.2 内容、布局、设计
设计=布局+创造力
原因：大多数人要么无法获得创造力，要么认为它成本太高。
这意味着大多数人不会设计，因此富文本设计不适合简单的内容编辑器。
然而，大多数人要么不知道如何排版，要么认为排版成本太高。
但是：Markdown Nice 将用户从排版中解放出来，只关注内容本身。
3.3 关于开源
开源是一个既简单又困难的过程。 简单这是因为你可以将所有有价值的东西（如笔记、书单、工具、平台等）输出到 GitHub。 这很容易做到。 这是因为我们努力对他人有价值并始终坚持取得成果。 那是非常困难的。
正如上面所解释的，开源实际上是在创造一个产品。 产品可以是技术产品（如redis、ant design），也可以是业务产品（如Markdown Nice）。 你只有做好了，才能影响别人。 价值。
打造产品的过程是曲折而漫长的。 对比Markdown Nice的开发流程可以发现以下步骤：
要有一个想法，验证其可行性和必要性，与同类产品进行比较，认识到问题，站在用户的角度把握核心价值思考，听取反馈，螺旋式上升，不断迭代，创造优质产品。 最重要的是，创造一个产品不仅需要写代码，还需要写广告。 ！ 巷子后面的酒味真吓人！ ！
加入开源并不是一个轻松的旅程。 希望你能珍惜。
开源项目讲解系列 - 如果您对开源项目感兴趣，请不要再担心。 开源项目发起者不再孤单。 通过阅读我们的文章，您将发现编程的乐趣，并了解参与开源项目是多么容易。 为了帮助更多人爱上开源，为开源做出贡献，请留言联系我们，加入我们吧~
下载微信小程序
微信是一款语音移动通讯软件，支持发送消息、视频。 、照片和文本通过移动网络。 。 微信带来了全新的移动通信体验，您可以单独或群组聊天，还可以根据您的地理位置查找附近的人。 有需要的朋友，请快来保存您的下载体验吧！
这几篇文章你可能也喜欢：
本文由主机参考刊发，转载请注明：整蛊微信公众号编辑器（微信公众号平台编辑器） https://zhujicankao.com/141458.html
评论前必须登录！
注册