最近想要捡起微信公众号,于是尝试下思源笔记的内容能否直接发微信公众号
思源笔记具备预览模式(快捷键 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;
}
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于