最近想要捡起微信公众号,于是尝试下思源笔记的内容能否直接发微信公众号
思源笔记具备预览模式(快捷键 ctrl+alt➕9),打开之后直接点击微信公众号图标即可复制内容和样式,能够在公众号的编辑器直接粘贴,但是样式有点过于朴素
所以,修改了下自己用的主题,使得预览模式的主题更适合用来发布文章,主要参考了微信 Markdown 编辑器 | Doocs 开源社区的样式
主题修改注意事项
- 微信公众号可以复制 html 样式,但是前提是不能用 css 变量,所以导出的 css 需要额外适配,用变量的都要修改。
- 标题的字体要用 px 而不是 em 为单位,否则思源预览和微信公众号预览的标题字体大小有偏差
- 发现 css 添加的伪元素无法粘贴到微信,可其他 markdown 转微信公众号的编辑器是可以的,暂时不清楚原因。
下面是思源笔记内的预览效果
复制样式后,直接粘贴到微信公众号的效果
代码分享
下列代码只影响预览模式和导出 pdf 样式,在 Tsundoku 主题和默认主题下测试能 work
/* 导出微信文章设置默认字体 */ .protyle-preview>.b3-typography { font-size: 14px !important; } /* 导出pdf设置默认字体 */ #preview .protyle-wysiwyg{ font-size: 17px !important; } .protyle-preview>.b3-typography p, .protyle-preview>.b3-typography [data-node-id], #preview .protyle-wysiwyg p,#preview .protyle-wysiwyg [data-node-id]{ border-radius: 0px !important; } .protyle-preview>.b3-typography h1, #preview .protyle-wysiwyg .h1{ font-size: 18px !important; font-weight: bold; border-bottom: 2px solid rgba(15, 76, 129, 1); text-align: center; } .protyle-preview>.b3-typography h2, #preview .protyle-wysiwyg .h2 { font-size: 16px !important; display: table; color: #fff !important; margin: 4em auto 2em; padding: 0 0.2em; background: rgba(15, 76, 129, 1); text-align: center; line-height: 1.75; } .protyle-preview>.b3-typography h3, #preview .protyle-wysiwyg .h3 { font-size: 16px !important; text-align: left; font-weight: bold; margin: 1em 8px 0.75em 0; padding-left: 8px; border-left: 4px solid rgba(15, 76, 129, 1); color: rgba(15, 76, 129, 1) !important; border-radius: 0px !important; } .protyle-preview .b3-typography h4, #preview .protyle-wysiwyg .h4 { font-size: 15px !important; font-weight: bold; color: rgba(15, 76, 129, 1); } .protyle-preview>.b3-typography h5, #preview .protyle-wysiwyg .h5 { font-size: 14px !important; font-weight: bold; color: rgba(15, 76, 129, 1); } .protyle-preview>.b3-typography h6, #preview .protyle-wysiwyg .h6{ font-size: 14px !important; font-weight: bold; } /* 图片居中 */ #preview .protyle-wysiwyg .p:has(span.img), .protyle-preview>.b3-typography p:has(span.img) { text-align:center; } /* 超链接 */ .protyle-preview>.b3-typography a { color: #338dd6; /* text-decoration: underline; */ } /* 行内代码 */ .protyle-preview>.b3-typography span[data-type~='code']{ color:#3779b3; background-color:#f3f4f4; } /* 代码块 */ .protyle-preview>.b3-typography .hljs, #preview .protyle-wysiwyg .hljs { background-color: #f8f9fa; } /* 表格框线 */ .protyle-preview>.b3-typography table tr th, .protyle-preview>.b3-typography table tr td{ border-color: #d1d3d6; } /* 引述块 */ .protyle-preview>.b3-typography blockquote{ border-left: 0em solid #4c6778; background-color: #73a8c70f; border: 1px solid rgb(224 239 249); border-radius: 7px !important; }
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于