程序员的专属微信公众号编辑器:定制 Markdown 转 HTML
效果(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 这个关键字是唯一的,所以大家可以参考我的方式,自己定制自己的需求。
感谢
- 感谢 zhning12 童鞋
- 感谢 markdown-nice
程序员的专属微信公众号编辑器:定制 Markdown 转 HTML的更多相关文章
- C# 实现生成带二维码的专属微信公众号推广海报
原文:C# 实现生成带二维码的专属微信公众号推广海报 很多微信公众号中需要生成推广海报的功能,粉丝获得专属海报后可以分享到朋友圈或发给朋友,为公众号代言邀请好友即可获取奖励的.海报自带渠道二维码,粉丝 ...
- 微信小程序跳转到微信公众号
我这里是uniapp里的操作 微信开发者工具配置 微信小程序官网地址:official-account 公众号关注组件. 当用户扫小程序码打开小程序时,开发者可在小程序内配置公众号关注组件,方便用户快 ...
- 微信小程序内链微信公众号的方法
最近接了一个需求,要求在微信小程序内部添加关注微信公众号的方式并给出解决方案,经过几天的翻官网文档,查周边资料,问资深技术员,初步给出两个解决方案: 题外话: 搬砖容易,建设难,搬砖的小伙伴请注明文章 ...
- 微信公众号Makrdown编辑器,语法你懂吗?
感谢 WeChat Format 源码: https://github.com/lyricat/wechat-format! 其他工具推荐: 微信公众号编辑器 Makrdown: https://md ...
- ASP.NET Core2实现静默获取微信公众号的用户OpenId
最近在做个微信公众号的项目,需要将入口放置在公众号二级菜单内,通过点击该菜单链接后进入到该项目中去,进入到项目后程序会自动通过微信公众号的API完成用户的OpenId获取.需求很简单,实现起来也不复杂 ...
- 微信公众号开发系列-13、基于RDIFramework.NET框架整合微信开发应用效果展示
1.前言 通过前面一系列文章的学习,我们对微信公众号开发已经有了一个比较深入和全面的了解. 微信公众号开发为企业解决那些问题呢? 我们经常看到微信公众号定制开发.微信公众平台定制开发,都不知道这些能给 ...
- 14-网页,网站,微信公众号基础入门(网页版MQTT,小试牛刀)
https://www.cnblogs.com/yangfengwu/p/11192639.html 抱歉哈...最近由于做板子,,教程的进度落下了... 这些天总共做了还几块板子 首先对当前这个教程 ...
- 使用小书匠及markdown here编辑博客和微信公众号
1. 使用小书匠连接Evernote并发布笔记到博客园 1.1 小书匠初探 我平时的信息收集的主要方法是采用Pocket+Evernote. 简单来说: 如果访问到非常有用,而且是必须要立刻记录的内容 ...
- [python]通过微信公众号“Python程序员”,编写python代码
今天发现微信公众号中,居然可以编写python代码,很是惊喜,觉得蛮有趣的. 步骤如下: 1.关注微信公众号“Python程序员” 2.关注成功后,点击右下角的“潘多拉”->"Pyth ...
随机推荐
- ServiceFabric极简文档-4.1 学习路线图
Service Fabric学习路线图 原文地址:Service Fabric学习路线图
- springcloud-高可用部署
1.场景描述 前端时间只简单介绍了下springcloud的高可用方案(springcloud高可用方案),今天详细介绍下如何实施springcloud的高可用部署. 2.解决方案 2.1 架构方案 ...
- 你可能不知道的github的秘密
github也可以使用快捷键 先举例子,如何快速查找项目中的文件? 只需要进入项目,并按下T键 在浏览代码时,如何快速跳到指定行? 只需要进入项目,并按下L键 下面是一些常用的快捷键 聚焦搜索栏 按下 ...
- 【超详细】vultr(CentOS7)+LNMP+WordPress 搭建个人博客
心血来潮想搭建个人博客,我的vps只用来搭ss未免太过浪费 在这里记录一下搭建个人博客的历程 0x00 写在前面 why vultr: 优点:便宜. 性能优良.按时间计费(不用包年 学生党的福音).稳 ...
- 关于iphone手机上点击事件不起作用
今天调试手机端H5页面的时候,发现一个很坑的问题,绑定的点击事件不起效果,安卓上都没问题,事件能正确触发,但是在iPhone没反应. 开始觉得是写法问题,后来发现,是由于iPhone上,点击的对象,必 ...
- ThreadLocal的使用场景:Web容器、Spring容器、日志打印
一.对于HTTP事务的理解 一次HTTP请求,就是一个事务.事务者,必须完整的执行其中的所有步骤,不能中断. 二.HTTP事务的隔离 每次HTTP请求对应一个HTTP事务,而每个请求都对应一个线程,线 ...
- spring boot入门篇
Spring Boot[快速入门] Spring Boot 概述 Build Anything with Spring Boot:Spring Boot is the starting point ...
- TP框架基础(一)
[使用框架] 官网:thinkphp.cn. 目前建议使用thinkPHP3.2版本 一.结构目录>Thinkphp文件夹,是thinkPHP的核心文件,里面的内容是不允许我们修改的 > ...
- Spring:IOC本质分析探究
IOC本质分析 分析实现 我们先用我们原来的方式写一段代码 . 先写一个UserDao接口 public interface UserDao { public void getUser(); } 再去 ...
- 使用jquery删除链接所在的行
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...