微信公众号 Markdown 编辑器
微信公众号文章 Markdown 在线编辑器,使用 markdown 语法创建一篇简介美观大方的微信公众号图文。由于发版本麻烦,和一些功能无法扩展停滞开发了,未来不再开发 Chrome 的插件(暂存在 chrome 分支),通过 web 版本定制更丰富的功能。
Github: https://github.com/jaywcjlove/wxmp
官网:https://jaywcjlove.github.io/wxmp
功能特性
开发计划和一些功能介绍,有需求可以在 issue 中提,使得工具变得更加完善。下面示例用于 web 应用中效果展示。
- 支持 Markdown 所有基础语法
- 支持自定义 CSS 样式
- 支持主题选择 & 编辑预览。
- 支持明暗两种主题预览。
- 支持色盘取色,快速替换文章整体色调
- 支持 URL 参数加载 Markdown 内容。
- 支持 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 1 | Header 2 |
---|---|
Key 1 | Value 1 |
Key 2 | Value 2 |
Key 3 | Value 3 |
支持 GFM 脚注
这是一个简单的 Markdown1 语法的脚注2。 页面最后有一些额外的文字描述。注意这不是完整的注脚3特性。
支持注释
<ruby>汉 <rt>Han</rt>
</ruby>
汉字注音效果:
汉 Han
字 zi
拼 pin
音 yin
注 zhu
音 yin
支持自定义样式
在 Markdown 中 HTML 注释也可以用在 markdown 中,利用这一特点,为一些内容自定一样式。使用 HTML 注释 <!--rehype:xxx-->
让 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%3A%2F%2Fraw.githubusercontent.com%2Fuiwjs%2Freact-markdown-editor%2Fmaster%2FREADME.mdMarkdown URL 地址: https://raw.githubusercontent.com/uiwjs/react-markdown-editor/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 部署《微信公众号 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 许可证获得许可。
GitHub 风格的 Markdown 规范 https://github.github.com/gfm/ ↩︎
脚注 https://github.blog/changelog/2021-09-30-footnotes-now-supported-in-markdown-fields/ ↩︎
微信文章不支持锚点跳转和打开第三方 URL 超链接,所以不支持完整的注脚特性。 ↩︎
Action Contributors https://github.com/jaywcjlove/github-action-contributors ↩︎
微信公众号 Markdown 编辑器相关推荐
- 业余草微信公众号Markdown编辑器, 适合代码排版
随着大家都转战微信公众平台,如何快速的编写文章就摆在了首要位置.不可否认,使用微信自带的编辑器可以做出好看的排版,甚至用第三方编辑器有更多的模板.但是,这些全部都需要手动的调整.本来公众平台就算是自媒 ...
- 微信公众号markdown编辑器
为什么80%的码农都做不了架构师?>>> http://md.phodal.com/ http://md.aclickall.com/ http://md.codingpy.c ...
- markdown 编辑器_推荐一款公众号 Markdown 编辑器
公众号 Markdown 编辑器 简介 这款编辑器可以将 Markdown 转换成微信公众号编辑器的样式,只需将 MD 文档复制到左侧栏,再在右侧栏顶部"点击复制",右侧预览内容就 ...
- 微信公众号 Markdown 排版工具
微信公众号 Markdown 排版工具 推荐网站:https://www.xttblog.com 公众号 Markdown 排版工具,让我们更多的关注内容,而非排版! 使用微信公众号编辑器有一个十分头 ...
- 使用NW.js封装微信公众号菜单编辑器为桌面应用
开发微信公众号的朋友都会遇到一个常见的需求就是修改自定义菜单,如果每个人都去开发这个不经常使用的功能确实有点浪费时间.前段时间在github上找到一个仿企业号的菜单编辑界面,结合微信的C# SDK开发 ...
- 微信公众平台菜单编辑php,如何使用Vue.js实现微信公众号菜单编辑器(思路详解)...
这次给大家带来如何使用Vue.js实现微信公众号菜单编辑器(思路详解),使用Vue.js实现微信公众号菜单编辑器的注意事项有哪些,下面就是实战案例,一起来看一下. 学习一段时间Vue.js,于是想尝试 ...
- 微信公众平台菜单编辑php,Vue.js实现微信公众号菜单编辑器步骤详解(上)
这次给大家带来Vue.js实现微信公众号菜单编辑器步骤详解(上),Vue.js实现微信公众号菜单编辑器的注意事项有哪些,下面就是实战案例,一起来看一下. 学习一段时间Vue.js,于是想尝试着做一个像 ...
- 关于微信公众号文章编辑器不能直接编辑html样式的处理方法
1.微信的后台是不支持html编辑的:你可以先在其他的编辑器里面编辑好了以后,复制到微信编辑器里面:这样既可以保持原来的格式,还可以自由设置自己的喜欢的格式. 比如我有一大大大大大大大大大大大段话,不 ...
- 微信公众号菜单html5,Vue.js 实现微信公众号菜单编辑器功能(一)
学习一段时间Vue.js,于是想尝试着做一个像微信平台里那样的菜单编辑器,在这里分享下 具体样式代码查看项目github 创建一个vue实例 var app = new Vue({ el: '#app ...
- 微信公众号html在线编辑器,关于微信公众号文章编辑器不能直接编辑html样式的处理方法...
一.微信的后台是不支持html编辑的:你能够先在其余的编辑器里面编辑好了之后,复制到微信编辑器里面:这样既能够保持原来的格式,还能够自由设置本身的喜欢的格式.css 好比我有一大大大大大大大大大大大段 ...
最新文章
- 2022-2028年中国高粘保护膜行业市场专项调研及发展趋势分析报告
- 人生快乐之道(组图)
- shell part2
- PEOPEO中国区总经理于景:当我谈交互设计时我谈些什么
- 前端学习(16):跳转链接小练习
- RSA 非对称加密原理
- 征文通知:第三届(2016)科学数据大会——科学数据与创新发展
- delphi解析json(解决乱码问题)
- NOIP2017错题
- Overload 和 Override
- java时钟时针绘制代码_java实现时钟效果
- Python-被7整除
- 洗地机什么牌子最好?洗地机品牌排行榜前十名
- 信任,是从心底产生的感觉
- uni-app 动画
- python程序打包为exe,并压缩体积最小!
- 教师如何创建百度百科词条?这篇带你了解
- 张驰课堂:六西格玛测量系统的误差分析与判定
- 如何使用python快速读取tsv文件
- 超级好用的思维导图软件XMind
热门文章
- Unity C# compiler: CS0121: The call is ambiguous between the following methods or properties
- Mac软件推荐:Soulver原来这么好用
- QQ邮箱发送验证码(springboot、redis整合)
- (*长期更新)软考网络工程师学习笔记——Section 13 Linux网络配置命令
- 接入微信SDK 获取用户定位
- 2021-07-06淘宝,天猫超市
- kali-top10-Nmap
- Python实现定时发送监控邮件
- 向爷爷介绍计算机,他折腾爷爷的计算机
- 小Z的袜子【莫队算法】