一款非常好用的微信排版小工具——Markdown Editor。这款工具不仅操作简便，还能让你根据个人喜好自定义CSS样式，真的非常贴心。不过呢，它也有一个小遗憾，就是暂时还不支持自定义组件的功能。关于这款工具的详细用法可以参考这篇文章。
项目介绍
今天，我给大家推荐一个好用的微信排版工具，叫mdxnotes。这个工具不仅能让你自定义CSS样式，还能自定义组件。而且，它还是开源软件，如果你有能力的话，可以根据自己的喜好进行开发。
这款软件的作者一直在不断地进行维护和更新。它在GitHub上获得了1,100多个星标，这表明该项目受到了很多人的喜爱和支持。
该项目完美支持
https://github.com/maqi1520/mdx-notes
MDX Notes的能力
支持一键复制到微信公众号 支持自定义组件，自定义样式 内置10+主题和代码主题 支持生成二维码 支持代码 diff 高亮 支持生成文章目录 支持生成微信脚注 支持文档格式化
功能介绍
支持 obsdian callouts语法。同时支持复制到公众号。
支持自定义组件，自定义样式。
上面的柱状图不是一张静态图片，而是用代码生成的。我们用React语法把它封装成了一个组件。
function Chart({ data = [], color }) {
return (
<div className="snowfall">
{data.map((d, i) => (
<div
key={i}
className="snowfall-bar"
style={{
height: d * 20,
backgroundColor: color,
}}
>
<span>{i + 1}月</span>
</div>
))}
</div>
)
}
export default {
Chart,
}
在mdx调用该组件：
<Chart data={[6, 5, 2, 4.5, 1.5, 2.5, 2, 2.5, 1.5, 2.5, 3.5, 7]} color="#94D277"/>
这样，我们就成功地把柱状图展示出来了。即使我们不熟悉代码，通过结合AI技术，也可以轻松生成我们想要的组件。
该软件提供了桌面版和网页版，同时也支持暗黑模式。
支持生成二维码
这个软件可以把链接变成二维码，这样你就能在微信公众号的文章里用二维码的形式分享第三方的链接了。
支持代码 diff高亮
mdxnotes创新性引入diff语法高亮支持，让内容修订痕迹可视化呈现。如下图：
项目使用
该项目提供了在线网页版和桌面版。在线版只需要打开网址即可使用这个编辑器。而桌面版需要下载安装。
线网页版:https://mdxnotes.com/
桌面版下载地址：https://github.com/maqi1520/mdx-notes/releases/tag/v1.0.3
下面以在线版为例子：
在线版的左边有三个标签页：MDX、CSS和Config。MDX用来写Markdown语法，CSS用来设置你自己的样式，Config用来配置自定义组件。
例如，我把这个文档的标题文字样式修改其他就在CSS标签页，添加对应的CSS样式即可。
/* 主色定义 */
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
color: #009874;
}
案例演示
在我的公众号里，经常会看到一种推荐阅读的模块，就像下面这张图展示的一样。你是不是也想知道这是怎么做到的？接下来我就来教大家怎么做，这样你们也能给自己的文章加上这种推荐功能了。
首先在Config标签页面中，填入如下内容：
function List({ children, title }) {
return (
<div className="list-card">
<div className="list-head">
<div className="list-head-line"></div>
<div className="list-head-line"></div>
</div>
<div className="list-title">{title}</div>
<div className="list-content">{children}</div>
</div>
)
}
export default {
List
}
然后在CSS标签页面中，填入这个组件的对应CSS，内容如下：
.list-card {
margin: 0 auto;
margin-top: 30px;
margin-bottom: 15px;
max-width: 320px;
background: #ffffff;
border: 1px solid #009874;
opacity: 1;
border-radius: 6px;
padding: 5.5px;
}
.list-head {
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
margin-top: -15px;
margin-bottom: -3px;
}
.list-head-line {
width: 7px;
height: 17px;
background: #ffffff;
border: 1px solid #009874;
opacity: 1;
border-radius: 77px;
}
.list-title {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #009874;
border-radius: 6px;
text-align: center;
color: #fff;
font-size: 15px;
}
.markdown-body .list-content ul {
display: flex;
flex-direction: column;
min-height: 40px;
padding: 15px 10px 0 5px;
list-style: none;
justify-content: space-between;
align-items: flex-start;
}
.markdown-body .list-content ul li {
padding: 15px 20px 15px 10px; /* 增加左侧内边距，为图标留出空间 */
margin: 8px 5px;
list-style: none;
background: linear-gradient(135deg, rgba(0, 152, 116, 0.1) 0%, rgba(255, 255, 255, 1) 50%);
border-radius: 8px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
font-size: 12px;
position: relative;
}
.markdown-body .list-content ul li a {
/* 布局属性 */
display: inline-block;
padding: 0.2em 0;
/* 字体定义 */
font: 500 0.86rem/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
"Hiragino Sans GB", "Microsoft YaHei", sans-serif;
/* 文本样式 */
color: #576b95;
text-decoration: none;
}
然后，在MDX标签页中添加文章，内容如下：
<List title="推荐文章">
- [运维人必学的23个神器：掌握它们，你的薪资翻倍只是开始](https://mp.weixin.qq.com/s/l1kb76-NCPynMOhm5sUgJQ)
- [网络运维必备！Windows和Linux 这些网络命令你掌握了吗？](https://mp.weixin.qq.com/s/xiklJ1uZAn4iZn-s_QKprw)
- [你真的会用curl吗？这份全方位教程让你秒变高手！](https://mp.weixin.qq.com/s/WmfdRYe_qshBaXCM8x5Rog)
- [降维打击Navicat！Chat2DB：21K Star的AI数据库管理新王者](https://mp.weixin.qq.com/s/b7_1Na0XX_nI8qRl-kDqsQ)
- [服务器巡检不再头疼：一键脚本批量检查，高效生成巡检报告！](https://mp.weixin.qq.com/s/olGmJtWWO9BiRUqqYT9eCQ)
- [告别平淡无奇：用 Markdown 让你的公众号文章瞬间吸粉无数！](https://mp.weixin.qq.com/s/s5k3qZV6VWnLa269Hmq2uA)
</List>
这样就完成了，是不是很简单呢。学会了吗，赶紧在你的公众号应用一下吧。
推荐本站淘宝优惠价购买喜欢的宝贝:
本文链接：https://www.hqyman.cn/post/11843.html 非本站原创文章欢迎转载，原创文章需保留本站地址！
微信支付宝扫一扫，打赏作者吧～休息一下~~
萌ICP备20248119号
