效果(Gif)

仓库地址

背景

在程序员的世界里,只要习惯用 Git,写文章必然就是 Markdown 了。

近来几天,重新玩起了微信公众号,最不能忍受的就是那个编辑器,效率很低。虽然微信现在已经提供了模板功能,但是对于喜欢多平台发文的程序员来讲,维护多个内容成本过高。

现状

了解了目前市场上主流的编辑器:

结论是:都不是我想要的。

这几个编辑器都是偏向推广玩法的类型,过于花俏。好一点的模板也基本都是收费的,所以只能放弃。

转变

经过 Google 几下,发现微信编辑器是可以直接复制 HTML 代码块,这就给我们提供了更多可能。

既然常规主流的玩法无法满足需求,那我就换了一个思路:继续 Markdown 书写,然后借用转换器转换

我开始换关键字搜索:React markdown 组件

运气

在搜索的过程中我偶然遇到了:markdown-nice

简介
支持自定义样式的 Markdown 编辑器
支持微信公众号排版
支持知乎、稀土掘金、博客园和CSDN等一系列平台
内容和自定义样式浏览器中实时保存
可在工具中提交自定义主题
支持上传图片、脚注、公式

因为用了 antd,所以看起来非常简洁,但是也因此非常庞大,但是这一点能接受。

需求

研究了作者提供了几个主题,发现彼此审美上有偏差,自己实在忍受不了,所以就 fork 了一份,开始大面积调整。

添加了一个 CDK8S 主题
调整默认主题为 CDK8S
调整默认配色为 atomOneLight
添加开关 `IS_STYLE_READ_CACHE_OPEN` 默认主题从 localstorage 读取
修改图床上传接口,改为私有服务的 API
去掉第一次加载弹出的更新弹窗

因为 CDK8S 这个关键字是唯一的,所以大家可以参考我的方式,自己定制自己的需求。

感谢

程序员的专属微信公众号编辑器:定制 Markdown 转 HTML的更多相关文章

  1. C# 实现生成带二维码的专属微信公众号推广海报

    原文:C# 实现生成带二维码的专属微信公众号推广海报 很多微信公众号中需要生成推广海报的功能,粉丝获得专属海报后可以分享到朋友圈或发给朋友,为公众号代言邀请好友即可获取奖励的.海报自带渠道二维码,粉丝 ...

  2. 微信小程序跳转到微信公众号

    我这里是uniapp里的操作 微信开发者工具配置 微信小程序官网地址:official-account 公众号关注组件. 当用户扫小程序码打开小程序时,开发者可在小程序内配置公众号关注组件,方便用户快 ...

  3. 微信小程序内链微信公众号的方法

    最近接了一个需求,要求在微信小程序内部添加关注微信公众号的方式并给出解决方案,经过几天的翻官网文档,查周边资料,问资深技术员,初步给出两个解决方案: 题外话: 搬砖容易,建设难,搬砖的小伙伴请注明文章 ...

  4. 微信公众号Makrdown编辑器,语法你懂吗?

    感谢 WeChat Format 源码: https://github.com/lyricat/wechat-format! 其他工具推荐: 微信公众号编辑器 Makrdown: https://md ...

  5. ASP.NET Core2实现静默获取微信公众号的用户OpenId

    最近在做个微信公众号的项目,需要将入口放置在公众号二级菜单内,通过点击该菜单链接后进入到该项目中去,进入到项目后程序会自动通过微信公众号的API完成用户的OpenId获取.需求很简单,实现起来也不复杂 ...

  6. 微信公众号开发系列-13、基于RDIFramework.NET框架整合微信开发应用效果展示

    1.前言 通过前面一系列文章的学习,我们对微信公众号开发已经有了一个比较深入和全面的了解. 微信公众号开发为企业解决那些问题呢? 我们经常看到微信公众号定制开发.微信公众平台定制开发,都不知道这些能给 ...

  7. 14-网页,网站,微信公众号基础入门(网页版MQTT,小试牛刀)

    https://www.cnblogs.com/yangfengwu/p/11192639.html 抱歉哈...最近由于做板子,,教程的进度落下了... 这些天总共做了还几块板子 首先对当前这个教程 ...

  8. 使用小书匠及markdown here编辑博客和微信公众号

    1. 使用小书匠连接Evernote并发布笔记到博客园 1.1 小书匠初探 我平时的信息收集的主要方法是采用Pocket+Evernote. 简单来说: 如果访问到非常有用,而且是必须要立刻记录的内容 ...

  9. [python]通过微信公众号“Python程序员”,编写python代码

    今天发现微信公众号中,居然可以编写python代码,很是惊喜,觉得蛮有趣的. 步骤如下: 1.关注微信公众号“Python程序员” 2.关注成功后,点击右下角的“潘多拉”->"Pyth ...

随机推荐

  1. Python之爬虫有感(一)

    urllib.request.Request('URL',headers = headers)User-Agent 是爬虫和反爬虫斗争的第一步,发送请求必须带User—Agent使用流程:    1. ...

  2. 利用stub技术进行单元测试

    待测试类:WebClient: import java.io.IOException; import java.io.InputStream; import java.net.HttpURLConne ...

  3. MDX查询SSAS结果--通过adomd.net展示到客户端

    SSAS多维模型建好之后,除了在excel客户端直接链接ssas源拖拽pivot分析使用外,还可以讲要展示的结果集通过MDX语句查询出来,嵌入到程序中,通过运行程序跑出完整的报表.如图所示:

  4. java.util.LinkedHashMap cannot be cast to

    Jackson转换泛型List出现错误java.util.LinkedHashMap cannot be cast to com.xxx ObjectMapper mapper = new Objec ...

  5. Git的使用和配置小白必看都是干货,为您解惑

    Git安装 首先下载git这个软件,然后打开码云新建仓库 在本地选择一个路径作为本地仓库 点新建仓库然后输入邮箱和密码,然后进行配置 在要作为本地仓库的地方新建一个文件夹,保存后关闭,在文件夹空白处鼠 ...

  6. JVM调优之探索CMS和G1的物理内存归还机制

    前言: 公司有一个资产统计系统,使用频率很低,但是要求在使用时查询速度快,因此想到做一些缓存放在内存中,在长时间没有使用,持久化到磁盘中,并对垃圾进行回收,归还物理内存给操作系统,从而节省宝贵资源给其 ...

  7. c++ 动态规划(数塔)

    c++ 动态规划(dp) 题目描述 观察下面的数塔.写一个程序查找从最高点到底部任意位置结束的路径,使路径经过数字的和最大. 每一步可以从当前点走到左下角的点,也可以到达右下角的点. 输入 5 13 ...

  8. linux初学者-输出输入管理

      1.输出重定向 在linux中,因为用户的权限不同,所以访问某些文件或者目录会被拒绝而形成错误输出,这些错误的输出也会显示出来.一般正确输出的编号为1,错误输出的编号为2.如下图,在普通用户stu ...

  9. RocketMQ中Producer的启动源码分析

    RocketMQ中通过DefaultMQProducer创建Producer DefaultMQProducer定义如下: public class DefaultMQProducer extends ...

  10. 显示Mac隐藏文件的命令:

    设置查看隐藏文件的方法如下:打开终端,输入命名 显示Mac隐藏文件的命令:defaults write com.apple.finder AppleShowAllFiles -bool true 隐藏 ...