效果(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. import tensorflow 报错

    >>> import tensorflowe:\ProgramData\Anaconda3\lib\site-packages\h5py\__init__.py:36: Future ...

  2. UVA297 四分树 Quadtrees 题解

    题目链接: https://www.luogu.org/problemnew/show/UVA297 附几道推荐题目(先完成再食用此题效果更佳) https://www.luogu.org/probl ...

  3. 个人永久性免费-Excel催化剂功能第84波-批量提取OUTLOOK邮件附件

    批量操作的事情常常能让人感到十分畅快,区别于一次次的手工的操作,它真正实现了“人工智能”想要的效果,人指挥机器做事情,机器就可以按着人意去操作.此篇给大家再次送了批量操作一绝活,批量下载OUTLOOK ...

  4. [springboot] 搭建项目及单元测试

    本文纯属记录自己学习的过程以及相关使用操作,使用工具Idea2018. 1.创建项目: -- 目录结构 2.配置文件   3.pom文件 4.创建测试类并启动项目 package com.zr.dem ...

  5. 博弈论基础之sg函数与nim

    在算法竞赛中,博弈论题目往往是以icg.通俗的说就是两人交替操作,每步都各自合法,合法性与选手无关,只与游戏有关.往往我们需要求解在某一个游戏或几个游戏中的某个状态下,先手或后手谁会胜利的问题.就比如 ...

  6. c++语言常用转义序列符号

    \a      响铃 \n      换行符 \r       回车符 t        水平制表符(Tab键) \b      退格符(BackSpace键) \\       反斜线 \'     ...

  7. C语言中的“>>”和“

    先说左移,左移就是把一个数的所有位都向左移动若干位,在C中用<<运算符.例如: int i = 1; i = i << 2; //把i里的值左移2位 也就是说,1的2进制是00 ...

  8. halcon视频教程如何学习?怎么样才能踏入机器视觉这个行业?

    本人是工作八年的视觉工程师,主要从事Halcon和Visionpro视觉开发,谈谈个人对视觉学习看法: 1.HALCON是德国MVtec公司开发的一套完善的标准的机器视觉算法包,它节约了产品成本,缩短 ...

  9. CSDN 免积分下载

    你可能不相信这个标题,那么打开下面的链接试试吧 ↓↓↓ Github项目 最新功能 ↓↓↓ 0积分资源搜索 0积分资源搜索(备用地址) CSDN资源导出 CSDN资源下载体验群 (每日可免费下载一次) ...

  10. [P2216] [HAOI2007]理想的正方形 「单调队列」

    思路:用单调队列分别维护行与列. 具体实现方法:是先用单调队列对每一行的值维护,并将a[][]每个区间的最大值,最小值分别存在X[][]和x[][]中. 那么X[][]与x[][]所存储的分别是1×n ...