专栏首页CDK8S程序员的专属微信公众号编辑器:定制 Markdown 转 HTML
原创

程序员的专属微信公众号编辑器:定制 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 这个关键字是唯一的,所以大家可以参考我的方式,自己定制自己的需求。

感谢

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 美团面试题:如何分析差评原因?

    需要分析导致分析差评的原因是什么,并给出改善方案。可以使用《猴子数据分析》里第6关讲过的分析方法,和第7-8关的如何用数据分析解决问题的框架来完成。

    猴子聊数据分析
  • 瓜瓜笔记 | 8 月份机器学习热门开源项目

    Mybridge AI从250多个AI开源项目中,以分享次数(the number of shares)、阅读时长(minutes read)等为feature...

    昱良
  • 【iOS开发】禁用 WebView 放大镜及拷贝粘贴弹出框

    背景: 当你的App中有 WebView 或者有 Text 文本的时候,毫无疑问,系统默认地会在你进行长按的时候,弹出一个框,来让你拷贝、粘贴、剪切文本等,亦...

    KyXu
  • 第三届Windows Mobile Dev Day纪实

    冬至的北京寒风刺骨,但是仍然无法阻挡Windows Mobile开发爱好者的满腔热情。下午1点半,来到霄云路的现代汽车大厦,参加今年的Windows Mobil...

    ShiJiong
  • web页面性能优化总结及原理解释

    何处锦绣不灰堆
  • TypeScript

    TypeScript 是JavaScript类型的超集,它可以编译成纯JavaScript。

    余生
  • 微信小程序开发教程第五章:微信小程序名片夹详情页开发

    今天加了新干货!除了开发日志本身,还回答了一些朋友的问题。 闲话不多说,先看下「名片盒」详情页的效果图: ? ? 备注下大致需求:顶部背后是轮播图,二维码...

    ytkah
  • 真实网站劫持案例分析

    1. 概述 上段时间一直忙于处理大会安全保障与应急,借助公司云悉情报平台,发现并处置几十起网站被劫持的情况。对黑客SEO技术颇有感觉。正好这段时间有时间,把以前...

    FB客服
  • 如何高效利用jsdelivr做cdn-GitStatic插件

    这款插件是基于默认 jsdelivr 静态加速, 类似于 cos/oos 储存静态方案,相信如果有前端开发经验的都知道,jsdelivr 做静态加速也是不错的。

    乔千
  • TypeScript手记(二)

    TypeScript 支持与 JavaScript 几乎相同的数据类型,此外还提供了实用的枚举类型方便我们使用。

    用户7572539

扫码关注云+社区

领取腾讯云代金券