登录 注册

思源笔记美化 | blockquote 块添加背景色

本贴最后更新于 490 天前，其中的信息可能已经物是人非

最近把 Tsundoku 主题的引述块样式修改了下，借鉴了 mustakshif/Hadeeth 主题的引述块样式

Tsundoku 主题目前更新已经是只为我个人使用而更新的状态了哈哈哈，所以更新样式就只考虑自己的喜好，不像之前还会顾及其他用户的喜好 🤭 毕竟社区其他主题都很好啦！

现在引述块样式长这样

Clip_2024-01-04_20-46-00

我之前其实很早就给 Tsundoku 引入了语雀的提示区块样式（也叫 callout 块、Admonition 块），给 blockquote 加背景色就可以引用，之前是每个背景色单独调整样式的，现在发现这种样式本身加背景色就很好看了

下面这个图片就是给 blockquote 加上背景色，再添加 emoji，就能得到我觉得很好看的效果。

Clip20240107124257.png

块里放上代码块，样式也还不错

Clip_2024-01-04_20-59-53

为了方便使用，我给设置 callout 模板，就可以快捷调用了

Clip_2024-01-04_20-49-52

虽然社区已经有了 Callout 插件，但是我觉得用模板的方式添加 callout 更自由，更适合我。我可以设置 callout 块是否有标题、添加什么 emoji，也方便更改。当然未来如果 Callout 插件如果支持设置模板的话，我可能就转用插件了哈哈哈

改完之后，就特别爱用 callout 块了

比如我最近在学习生物实验操作，callout 就很方便记录一些思考问题、注意事项、信息补充等等，记笔记更快乐了呢！

Clip_2024-01-04_20-52-32

Clip_2024-01-04_20-53-50

  • 思源笔记

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

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

    25453 引用 • 105285 回帖
1 引用
豆沙绿等背景色分享 • tongzi
1 操作
Achuan-2 在 2024-01-07 12:43:16 更新了该帖
上海 位置
2 感谢
6 收藏
3 赞同
1 引用
1 操作
6 回帖
2
1.3k 472 11 565 17 5 252

相关帖子

6 回帖
思源笔记美化 | blockquote 块添加背景色

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • zxy0124 • • 1 赞同

    赞啊！

    笔记做出来真漂亮

  • yjmsiyuan •

    我没看到如何用，用的就是 Tsundoku 主题。没有 emoji。

    两个问题

    1.选择器是什么，如何自定义

    2.模板从那下？

    1 回复
  • Achuan-2 • • 2
    订阅者 先知 作者

    1. 就是 blockquote 样式，目前没有更多样式，只是 blockquote 添加块背景色充当 callout 的

    2. 模板是我自用的，因为我这里所谓的 callout 只是 blockquote 添加背景色，不附带 emoji，emoji 是自己添加的
      Clip20240106173242.png

      下面是我自用的样式，可以参考

        > 🚨 错误
  > {: updated="20240103230755" id="20240103230730-nala6w9"}
  >
  {: id="20240103230730-nf5k0m1" style="background-color: var(--b3-card-error-background); color: var(--b3-card-error-color);" updated="20240103230730"}

  > ❓ 疑问
  > {: id="20240103230546-plw2ox8" updated="20240103230622"}
  >
  {: style="background-color: var(--b3-card-error-background); color: var(--b3-card-error-color);" updated="20240103230546" id="20240103230546-gc3tu8k"}

  > ℹ 信息
  > {: id="20240103230716-sdarob7" updated="20240103230721"}
  >
  {: id="20240103230716-4gwz2jo" style="background-color: var(--b3-card-info-background); color: var(--b3-card-info-color);" updated="20240103230716"}

  > 🤔 思考
  > {: id="20240103221959-8e55g9x" updated="20240103230552"}
  >
  {: id="20240103221959-lx09a45" style="background-color: var(--b3-card-success-background); color: var(--b3-card-success-color);" updated="20240103222007"}

  > 💡 灵感
  > {: id="20240103230818-92twep3" updated="20240103230840"}
  >
  {: id="20240103230818-1mvumtk" style="background-color: var(--b3-card-success-background); color: var(--b3-card-success-color);" updated="20240103230818"}
​
    1 回复
    1 引用
  • yjmsiyuan •

    受教了，又多了一种高级的用法。我原来只会用 css 来设置样式。

  • Frostime •
    订阅者 付费者 支持者 捐赠者

    已经有 callout 插件了啊

    1 回复
  • JeffreyChen • • 1 • 2 评论
    付费者 支持者 捐赠者

    帖子中间就说了：

    虽然社区已经有了 Callout 插件，但是我觉得用模板的方式添加 callout 更自由，更适合我。我可以设置 callout 块是否有标题、添加什么 emoji，也方便更改。当然未来如果 Callout 插件如果支持设置模板的话，我可能就转用插件了哈哈哈

    高度近视，不过后续确实有自定义模板的计划 😂
    Frostime • • 1 赞同
    @Frostime 其实用插件还有一点问题，把笔记导出为 markdown 分享到博客上，emoji 会丢失的
    Achuan-2 •
请输入回帖内容 ...
Achuan-2
公众号：Achuan同学 上海
回帖
1038
 帖子
252
 积分
1212

近期热议

推荐标签 标签

  • Vditor

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

    369 引用 • 1846 回帖 • 4 关注
  • 七牛云

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

    28 引用 • 226 回帖 • 128 关注
  • 叶归
    8 引用 • 36 回帖 • 17 关注
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本，加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较（vimdiff）、语法高亮、全面的帮助系统、本地脚本（Vimscript）和便于选择的可视化模式。

    29 引用 • 66 回帖 • 1 关注
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统，在 BSD 开源许可证下发布。

    22 引用 • 22 回帖 • 3 关注
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息，资讯有时效性和地域性。

    56 引用 • 85 回帖
  • Hibernate

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

    39 引用 • 103 回帖 • 725 关注
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 647 关注
  • SMTP

    SMTP（Simple Mail Transfer Protocol）即简单邮件传输协议，它是一组用于由源地址到目的地址传送邮件的规则，由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇，它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 636 关注
  • WebComponents

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

    1 引用 • 8 关注
  • WebClipper

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

    3 引用 • 9 回帖
  • Windows

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

    227 引用 • 476 回帖
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML 网页上使用，用来给 HTML 网页增加动态功能。

    730 引用 • 1280 回帖
  • API

    应用程序编程接口（Application Programming Interface）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

    79 引用 • 431 回帖
  • DevOps

    DevOps（Development 和 Operations 的组合词）是一组过程、方法与系统的统称，用于促进开发（应用程序/软件工程）、技术运营和质量保障（QA）部门之间的沟通、协作与整合。

    58 引用 • 25 回帖 • 3 关注
  • 房星科技

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

    6 引用 • 141 回帖 • 590 关注
  • Swagger

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

    26 引用 • 35 回帖
  • 反馈

    Communication channel for makers and users.

    121 引用 • 907 回帖 • 274 关注
  • 单点登录

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

    9 引用 • 25 回帖
  • 以太坊

    以太坊（Ethereum）并不是一个机构，而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity，使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物：投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖 • 1 关注
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架，使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用，例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 35 关注
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息（如用户名与密码），即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权，因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 30 关注
  • JVM

    JVM（Java Virtual Machine）Java 虚拟机是一个微型操作系统，有自己的硬件构架体系，还有相应的指令系统。能够识别 Java 独特的 .class 文件（字节码），能够将这些文件中的信息读取出来，使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖 • 2 关注
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖 • 1 关注
  • TextBundle

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

    1 引用 • 2 回帖 • 81 关注
  • 机器学习

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

    83 引用 • 37 回帖
  • 思源笔记

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

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

    25453 引用 • 105285 回帖

最新标签