头图

微信公众号 Markdown 编辑器

微信公众号文章 Markdown 在线编辑器,使用 markdown 语法创建一篇简介美观大方的微信公众号图文。由于发版本麻烦,和一些功能无法扩展停滞开发了,未来不再开发 Chrome 的插件(暂存在 chrome 分支),通过 web 版本定制更丰富的功能。

Github: https://github.com/jaywcjlove...
官网:https://jaywcjlove.github.io/...

功能特性

开发计划和一些功能介绍,有需求可以在 issue 中提,使得工具变得更加完善。下面示例用于 web 应用中效果展示。

  • [x] 支持 Markdown 所有基础语法
  • [x] 支持自定义 CSS 样式
  • [x] 支持主题选择 & 编辑预览。
  • [x] 支持明暗两种主题预览。
  • [ ] 支持色盘取色,快速替换文章整体色调
  • [x] 支持 URL 参数加载 Markdown 内容。
  • [x] 支持 URL 参数选择预览主题。

支持代码块样式

下面是 jsx 代码块展示示例,并高亮代码,用于 web 应用中效果展示。

function Demo() {
  return <div className="demo">Hello World!</div>
}

下面是 css 代码块展示示例,并高亮代码,用于 web 应用中效果展示。

li {
  font-size: 16px;
  margin: 0;
  line-height: 26px;
  color: rgb(30 41 59);
  font-family:-apple-system-font,BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB , Microsoft YaHei UI , Microsoft YaHei ,Arial,sans-serif;
}

支持内联代码

用于 web 应用中效果展示。

Inline Code {code: 0}

支持表格

表格无法使用自定义样式,暂时没找到解决途径

Header 1Header 2
Key 1Value 1
Key 2Value 2
Key 3Value 3

支持 GFM 脚注

这是一个简单的 Markdown1 语法的脚注2。 页面最后有一些额外的文字描述。注意这不是完整的注脚3特性。

支持注释

<ruby>
  汉 <rt>Han</rt>
</ruby>

汉字注音效果:
<ruby>
汉 <rt>Han</rt>
字 <rt>zi</rt>
拼 <rt>pin</rt>
音 <rt>yin</rt>
注 <rt>zhu</rt>
音 <rt>yin</rt>
</ruby>

支持自定义样式

<!--rehype:style=color: red;-->

在 Markdown 中 HTML 注释也可以用在 markdown 中,利用这一特点,为一些内容自定一样式。使用 HTML 注释 <!--rehype:xxx--><!--rehype:style=color: red;background: #ff000033;--> 让 Markdown 支持样式自定义。

## 定义标题样式
<!--rehype:style=display: flex; height: 230px; align-items: center; justify-content: center; font-size: 38px;-->

支持对某些文字变更样式,如_文字颜色_<!--rehype:style=color: red;-->,文字颜色将被设置为红色(red)。

⚠️ 注意:这一特性可能适用于有一定 css 前端基础知识的用户,不过它也非常简单,使用 <!--rehype:style= 开始,--> 结束,中间包裹 css 样式,如 color: red; 设置文字红色。

标记忽略内容

此特性利用 HTML 注释在 markdown 中被忽略的特性,标记需要忽略的内容,标记开始 <!--rehype:ignore:start-->,标记结束 <!--rehype:ignore:end-->,被标记的内容在微信 Markdown 编辑器预览中不显示。在其它预览工具中展示内容,比如 GitHub 中能展示。

# 注释忽略

<!--rehype:ignore:start-->内容在微信 Markdown 编辑器预览中不显示。在其它预览工具中展示内容。<!--rehype:ignore:end-->

支持 URL 参数加载 Markdown 内容

https://<URL>?md=<Markdown 资源 URL>

加载 Markdown 内容的示例 URL:

https://jaywcjlove.github.io/wxmp/#/?theme=underscore&md=https://raw.githubusercontent.com/jaywcjlove/c-tutorial/master/README.md

Markdown URL 地址: https://raw.githubusercontent.com/jaywcjlove/c-tutorial/master/README.md

主题定制

在目录 src/themes 中存放默认主题,在 src/store/context.tsx 中配置主题,主题使用 css 定义样式,不支持复杂的选择器。提供在线主题编辑器,欢迎修改并 PR 进仓库供大家使用。

/* 1~6 标题样式定义 */
h1 {} h2 {} h3 {} h4 {} h5 {} h6 {}
a { color: red; } /* 超链接样式定义 */
strong {} /* 加粗样式定义 */
del {} /* 删除线样式定义 */
em {}  /* 下划线样式定义 */
u {}   /* 下划线样式定义 */
p {}   /* 段落样式定义 */
ul {}  /* 无序列表样式定义 */
ol {}  /* 有序列表样式定义 */
li {}  /* 列表条目样式定义 */
blockquote {} /* 块级引用样式定义 */
table {}
td {}
th {}
pre {}        /* 样式定义 */
.code-highlight {} /* 代码块样式定义 */
.code-line {}      /* 代码块行样式定义 */
.code-spans {}     /* 代码块行样式定义 */

sup {} /* GFM 脚注样式定义 */
.footnotes-title {} /* GFM 脚注,参考标题样式定义 */
.footnotes-list {} /* GFM 脚注,参考列表样式定义 */

.image-warpper {} /* 图片父节点样式定义 */
.image {} /* 图片样式定义 */

/* 部分代码高亮样式 */
.comment {}
.property {}
.function {}
.keyword {}
.punctuation {}
.unit {}
.tag {}
.color {}
.selector {}
.quote {}
.number {}
.attr-name {}
.attr-value {}

部署

Docker Image Version (latest by date) Docker Image Size (latest by date) Docker Pulls

轻松通过 docker 部署《微信公众号 Markdown 编辑器》网站应用。

docker pull wcjiang/wxmp
# Or
docker pull ghcr.io/jaywcjlove/wxmp:latest
docker run --name wxmp --rm -d -p 96611:3000 wcjiang/wxmp:latest
# Or
docker run --name wxmp -itd -p 96611:3000 wcjiang/wxmp:latest
# Or
docker run --name wxmp -itd -p 96611:3000 ghcr.io/jaywcjlove/wxmp:latest

在浏览器中访问以下 URL

http://localhost:96611/

贡献者

一如既往,感谢我们出色的贡献者!

上图贡献者列表,由 action-contributors4 自动生成贡献者图片。

License

根据 MIT 许可证获得许可。


  1. GitHub 风格的 Markdown 规范 https://github.github.com/gfm/
  2. 脚注 https://github.blog/changelog...
  3. 微信文章不支持锚点跳转和打开第三方 URL 超链接,所以不支持完整的注脚特性。
  4. Action Contributors https://github.com/jaywcjlove...

小弟调调
[链接]

小弟调调要埋名啦

8.3k 声望
2k 粉丝
0 条评论
推荐阅读
macOS包管理器 Homebrew 备忘清单
Homebrew 是 macOS(或Linux)缺少的包管理器,备忘清单包含 brew 命令的使用与安装在线预览: [链接]开源仓库:[链接]安装 {代码...} 加速安装和更新,将仓库源码通过 gitee 同步到国内,这样速度杠杠的 {代码...}...

小弟调调1阅读 1.1k

封面图
正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青57阅读 8.6k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy49阅读 7.3k评论 12

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 7k评论 12

封面图
CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

XboxYan48阅读 3.3k评论 14

封面图
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs32阅读 3.5k评论 5

封面图
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan35阅读 2.7k评论 2

封面图

小弟调调要埋名啦

8.3k 声望
2k 粉丝
宣传栏