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

本贴最后更新于 419 天前,其中的信息可能已经水流花落

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

思源笔记具备预览模式(快捷键 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; }
  • 思源笔记

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

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

    26030 引用 • 108029 回帖
  • 公众号
    22 引用 • 147 回帖 • 1 关注

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
请输入回帖内容 ...

推荐标签 标签

  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    371 引用 • 1857 回帖 • 2 关注
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

    336 引用 • 324 回帖
  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 677 关注
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架,它对 JDBC 进行了非常轻量级的对象封装,使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 729 关注
  • 浅吟主题

    Jeffrey Chen 制作的思源笔记主题,项目仓库:https://github.com/TCOTC/Whisper

    1 引用 • 28 回帖 • 3 关注
  • SQLite

    SQLite 是一个进程内的库,实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    4 引用 • 7 回帖 • 4 关注
  • PWA

    PWA(Progressive Web App)是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术,在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 184 关注
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据。 这种动作(网页浏览,搜索和其他用户的行动)是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    36 引用 • 35 回帖 • 1 关注
  • BND

    BND(Baidu Netdisk Downloader)是一款图形界面的百度网盘不限速下载器,支持 Windows、Linux 和 Mac,详细介绍请看这里

    107 引用 • 1281 回帖 • 36 关注
  • 工具

    子曰:“工欲善其事,必先利其器。”

    299 引用 • 764 回帖
  • Oracle

    Oracle(甲骨文)公司,全称甲骨文股份有限公司(甲骨文软件系统有限公司),是全球最大的企业级软件公司,总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年,甲骨文已超越 IBM,成为继 Microsoft 后全球第二大软件公司。

    107 引用 • 127 回帖 • 341 关注
  • RESTful

    一种软件架构设计风格而不是标准,提供了一组设计原则和约束条件,主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。

    30 引用 • 114 回帖 • 1 关注
  • 深度学习

    深度学习(Deep Learning)是机器学习的分支,是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    43 引用 • 44 回帖
  • 七牛云

    七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。

    29 引用 • 230 回帖 • 124 关注
  • Anytype
    3 引用 • 31 回帖 • 26 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 35 关注
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言,在 20 世纪 90 年代中期由日本的松本行弘(まつもとゆきひろ/Yukihiro Matsumoto)设计并开发。在 Ruby 社区,松本也被称为马茨(Matz)。

    7 引用 • 31 回帖 • 260 关注
  • Docker

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的操作系统上。容器完全使用沙箱机制,几乎没有性能开销,可以很容易地在机器和数据中心中运行。

    497 引用 • 934 回帖
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    42 引用 • 130 回帖 • 252 关注
  • 单点登录

    单点登录(Single Sign On)是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖 • 6 关注
  • 知乎

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • WebClipper

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

    3 引用 • 9 回帖 • 2 关注
  • iOS

    iOS 是由苹果公司开发的移动操作系统,最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统,最初是设计给 iPhone 使用的,后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样,属于类 Unix 的商业操作系统。

    89 引用 • 150 回帖
  • 心情

    心是产生任何想法的源泉,心本体会陷入到对自己本体不能理解的状态中,因为心能产生任何想法,不能分出对错,不能分出自己。

    59 引用 • 369 回帖
  • flomo

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

    6 引用 • 143 回帖 • 2 关注
  • 支付宝

    支付宝是全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖
  • ReactiveX

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

    1 引用 • 2 回帖 • 182 关注