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

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

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

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

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

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

    24552 引用 • 100531 回帖
  • 公众号
    22 引用 • 146 回帖 • 1 关注

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • submartingale via macOS

    感谢大佬,收了!

  • 其他回帖
  • Achuan-2 via Android

    需要有会员,先上传图片到思源图床

  • a1007479270

    我复制过去时,图片全部不加载,无法上传到微信公众号,不知道怎么回事。

    1 回复
  • Achuan-2

    思源目前数学公式确实无法粘贴到微信公众号,已经提了 issue 了
    二级标题的问题,看你是用的我的 css,还是别人的主题,要设置特殊颜色,要直接设置颜色,不能用 css 变量

  • 查看全部回帖

推荐标签 标签

  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 384 回帖 • 3 关注
  • 尊园地产

    昆明尊园房地产经纪有限公司,即:Kunming Zunyuan Property Agency Company Limited(简称“尊园地产”)于 2007 年 6 月开始筹备,2007 年 8 月 18 日正式成立,注册资本 200 万元,公司性质为股份经纪有限公司,主营业务为:代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 787 关注
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库,并提供多种语言的 API。从 2010 年 3 月 15 日起,Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始,Redis 的开发由 Pivotal 赞助。

    286 引用 • 248 回帖 • 20 关注
  • 音乐

    你听到信仰的声音了么?

    61 引用 • 512 回帖
  • Flutter

    Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作,它正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖 • 2 关注
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    178 引用 • 817 回帖
  • V2Ray
    1 引用 • 15 回帖
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。

    23 引用 • 32 回帖
  • Unity

    Unity 是由 Unity Technologies 开发的一个让开发者可以轻松创建诸如 2D、3D 多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎。

    25 引用 • 7 回帖 • 139 关注
  • 域名

    域名(Domain Name),简称域名、网域,是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称,用于在数据传输时标识计算机的电子方位(有时也指地理位置)。

    43 引用 • 208 回帖 • 1 关注
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器,可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API,可通过 DOM,CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 491 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具,支持本地 Markdown 文件编辑,支持双向链接和关系图。

    A second brain, for you, forever.

    21 引用 • 204 回帖
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储,专门用于在分布式系统中保存关键数据。

    6 引用 • 26 回帖 • 547 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    692 引用 • 535 回帖 • 1 关注
  • SendCloud

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

    2 引用 • 8 回帖 • 488 关注
  • Log4j

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

    20 引用 • 18 回帖 • 34 关注
  • Visio
    1 引用 • 2 回帖
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    182 引用 • 1005 回帖 • 1 关注
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器,在 1999 年被捐献给 ASF(Apache Software Foundation),隶属于 Jakarta 项目,现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范,同时也提供 HTTP 服务,是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖 • 7 关注
  • 互联网

    互联网(Internet),又称网际网络,或音译因特网、英特网。互联网始于 1969 年美国的阿帕网,是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连,形成逻辑上的单一巨大国际网络。

    99 引用 • 361 回帖
  • Chrome

    Chrome 又称 Google 浏览器,是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写,包括 WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。

    62 引用 • 289 回帖
  • Swagger

    Swagger 是一款非常流行的 API 开发工具,它遵循 OpenAPI Specification(这是一种通用的、和编程语言无关的 API 描述规范)。Swagger 贯穿整个 API 生命周期,如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 3 关注
  • InfluxDB

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

    2 引用 • 90 关注
  • Hibernate

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

    39 引用 • 103 回帖 • 720 关注
  • 房星科技

    房星网,我们不和没有钱的程序员谈理想,我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源,遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 588 关注
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时,提供更无缝的用户体验。

    1 引用 • 2 回帖 • 73 关注