效果（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. NOIP 2017 惊魂记

    考完了NOIP三周后才开始补……然后又补了一周…… DAY -1: 晚上吃了一顿送行宴散伙饭,然后默默地看了一遍之前所有考试后写的题解,再读了几遍板子,然后和QTY一起和达哥又一次在外面谈了一个小时, ...

  2. Linux查看空间大小的命令

    在linux中,常用查看空间大小的命令有df.du,下面依次介绍一下. df 命令是linux系统上以磁盘分区为单位来查看文件系统的命令,后面可以加上不同的参数来查看磁盘的剩余空间信息.Linux d ...

  3. 20131221-Dom练习-第二十六天（未完）

    [1] //总结,写代码,一要动脑,理解用脑 //二要练,要动手,要有用身体记忆代码的觉悟,记忆用手 //三学编程最快的方法是,直接接触代码,用脑,用手接触代码 //面向对象的编码方式,对象还是对象, ...

  4. [原创]Zabbix3.4_API的python示例

    说明: 1.python版本为:python2.7 2.zabbix版本为:zabbix3.4 3.通过python脚本调用zabbix的api接口可以实现批量增删改查主机的信息. 示例如下: #-* ...

  5. list和list<map<String,object>>比较，不存在map的key赋值

    package com; import java.math.BigDecimal; import java.text.ParseException; import java.text.SimpleDa ...

  6. Vue杂谈

    <div id="app"> <input type="text" ref="input1"/> <butto ...

  7. 小白之入口即化——十分钟看懂while循环，字符串格式化，运算符

    while循环 while循环-死循环 while空格+条件+冒号 缩进+循环体 3.打断死循环 break--终止当前循环 while True: print(123) print(234) bre ...

  8. php if语句

    一.前言 if语句 是几乎所有编程语言都有的函数. 当然我们最好的php这么最好的语言也有啦~ 二.搞起! 直接上代码不多哔哔.talk is cheap show me the code 2.1 i ...

  9. [leetcode]95 Unique Binary Search Trees II (Medium)

    原题 字母题添加链接描述 一开始完全没有思路.. 百度看了别人的思路,对于这种递归构造的题目还是不熟,得多做做了. 这个题目难在构造出来.一般构造树都需要递归. 从1–n中任意选择一个数当做根节点,所 ...

  10. JavaScript数组高性能去重解决方案

    在大多数的人眼里,数组去重是一个很简单的课题,很多人甚至熟练掌握了多种数组去重的方法,然而大多时候,我们却忽略了数组去重所消耗的时间资源.譬如我们在做前端性能优化的时候,又有多少人会考虑JavaScr ...