尝试用思源笔记直接发布公众号

最近想要捡起微信公众号，于是尝试下思源笔记的内容能否直接发微信公众号

思源笔记具备预览模式（快捷键 ctrl+alt➕9），打开之后直接点击微信公众号图标即可复制内容和样式，能够在公众号的编辑器直接粘贴，但是样式有点过于朴素

所以，修改了下自己用的主题，使得预览模式的主题更适合用来发布文章，主要参考了微信 Markdown 编辑器 | Doocs 开源社区的样式

主题修改注意事项

1. 微信公众号可以复制 html 样式，但是前提是不能用 css 变量，所以导出的 css 需要额外适配，用变量的都要修改。
2. 标题的字体要用 px 而不是 em 为单位，否则思源预览和微信公众号预览的标题字体大小有偏差
3. 发现 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;
}

​