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

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

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

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

主题修改注意事项

  1. 微信公众号可以复制 html 样式,但是前提是不能用 css 变量,所以导出的 css 需要额外适配,用变量的都要修改。
  2. 标题的字体要用 px 而不是 em 为单位,否则思源预览和微信公众号预览的标题字体大小有偏差
  3. 发现 css 添加的伪元素无法粘贴到微信,可其他 markdown 转微信公众号的编辑器是可以的,暂时不清楚原因。

下面是思源笔记内的预览效果

Clip20240428172527.png

复制样式后,直接粘贴到微信公众号的效果

Clip20240428172925.png

Clip20240428173604.png

Clip20240428173816.png

代码分享

下列代码只影响预览模式和导出 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;
}

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    19004 引用 • 71348 回帖 • 2 关注
  • 公众号
    24 引用 • 151 回帖 • 1 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
请输入回帖内容 ...
Achuan-2
给时间以生命而不是给生命以时间,个人博客https://www.achuan-2.top/ 上海

推荐标签 标签

  • Swift

    Swift 是苹果于 2014 年 WWDC(苹果开发者大会)发布的开发语言,可与 Objective-C 共同运行于 Mac OS 和 iOS 平台,用于搭建基于苹果平台的应用程序。

    34 引用 • 37 回帖 • 498 关注
  • 生活

    生活是指人类生存过程中的各项活动的总和,范畴较广,一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    228 引用 • 1450 回帖 • 1 关注
  • 一些有用的避坑指南。

    69 引用 • 93 回帖
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量,事件及实时分析。

    2 引用 • 54 关注
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 126 关注
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    34 引用 • 467 回帖 • 696 关注
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统,它问世于 1985 年,起初仅仅是 Microsoft-DOS 模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家户户人们最喜爱的操作系统。

    215 引用 • 462 回帖
  • 微服务

    微服务架构是一种架构模式,它提倡将单一应用划分成一组小的服务。服务之间互相协调,互相配合,为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建,能够被独立的部署。

    96 引用 • 155 回帖
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统,它完整实现了 JMS 规范,是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 626 关注
  • Ubuntu

    Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的 Linux 操作系统,其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词,意思是“人性”、“我的存在是因为大家的存在”,是非洲传统的一种价值观,类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    123 引用 • 168 回帖 • 2 关注
  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    76 引用 • 37 回帖
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下,开发分布式程序。充分利用集群的威力进行高速运算和存储。

    82 引用 • 122 回帖 • 621 关注
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖
  • WebComponents

    Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。

    1 引用 • 23 关注
  • HHKB

    HHKB 是富士通的 Happy Hacking 系列电容键盘。电容键盘即无接点静电电容式键盘(Capacitive Keyboard)。

    5 引用 • 74 回帖 • 411 关注
  • OpenShift

    红帽提供的 PaaS 云,支持多种编程语言,为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 606 关注
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展,它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖
  • 链书

    链书(Chainbook)是 B3log 开源社区提供的区块链纸质书交易平台,通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书,我们共同构建这个全新的交易平台,让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线,也许以后还有计划重制上线。

    14 引用 • 257 回帖 • 1 关注
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目,是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台,为开发者提供便利的 API 接口来调用服务,让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 444 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。

    21 引用 • 140 回帖 • 29 关注
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流,分享无限上传的图片,发布链接和视频,更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 456 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    140 引用 • 441 回帖
  • flomo

    flomo 是新一代 「卡片笔记」 ,专注在碎片化时代,促进你的记录,帮你积累更多知识资产。

    3 引用 • 85 回帖 • 4 关注
  • 笔记

    好记性不如烂笔头。

    305 引用 • 780 回帖
  • 百度

    百度(Nasdaq:BIDU)是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 252 关注
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1347 回帖 • 1 关注
  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 424 关注