分享下几个 Callout 样式

样式如图

image.png

使用主题

这里我使用的是 VSCode Lite Edit 主题的暗黑模式

使用方法

使用方法:在思源笔记里面嵌入 HTML 代码块就可以了

代码展示:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Dark Mode Callout</title>
  <style>
    body {
      background-color: #121212;
      color: #e6e6e6;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      padding: 2rem;
    }
    .callout {
      border-radius: 6px;
      padding: 1px 15px;
      margin: 1.5rem 0;
      max-width: 100%;
      display: flex;
      flex-direction: column;
      border-left: 1.5px solid;
    }
    .callout-header {
      display: flex;
      align-items: center;
      margin-bottom: 1px;
    }
    .callout-header .icon {
      font-size: 1.2em;
      margin-right: 8px;
      flex-shrink: 0;
    }
    .callout-header h4 {
      margin: 0;
      font-size: 1rem;
      font-weight: bold;
    }
    .callout-content {
      font-size: 0.95rem;
      line-height: 1.5;
    }
    /* 每种类型的配色 */
    .note { border-color: #1e88e5; }
    .note .icon, .note h4 { color: #1e88e5; }
    .tip { border-color: #43a047; }
    .tip .icon, .tip h4 { color: #43a047; }
    .success { border-color: #43a047; }
    .success .icon, .success h4 { color: #43a047; }
    .warning { border-color: #fb8c00; }
    .warning .icon, .warning h4 { color: #fb8c00; }
    .danger { border-color: #e53935; }
    .danger .icon, .danger h4 { color: #e53935; }
    .failure { border-color: #e53935; }
    .failure .icon, .failure h4 { color: #e53935; }
    .bug { border-color: #d84315; }
    .bug .icon, .bug h4 { color: #d84315; }
    .example { border-color: #7b1fa2; }
    .example .icon, .example h4 { color: #7b1fa2; }
    .quote { border-color: #5e35b1; }
    .quote .icon, .quote h4 { color: #5e35b1; }
  </style>
</head>
<body>
<h3>Supported types</h3>
<p>Following is a list of type qualifiers provided by Material for MkDocs:</p>
<div class="callout note">
  <div class="callout-header">
    <span class="icon">📝</span>
    <h4>Note</h4>
  </div>
  <div class="callout-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.</p>
  </div>
</div>
<div class="callout tip">
  <div class="callout-header">
    <span class="icon">💡</span>
    <h4>Tip</h4>
  </div>
  <div class="callout-content">
    <p>Use this style to give users helpful advice or suggest best practices.</p>
  </div>
</div>
<div class="callout warning">
  <div class="callout-header">
    <span class="icon">⚠️</span>
    <h4>Warning</h4>
  </div>
  <div class="callout-content">
    <p>This action may cause irreversible changes. Please proceed with caution.</p>
  </div>
</div>
<div class="callout danger">
  <div class="callout-header">
    <span class="icon">⚡</span>
    <h4>Danger</h4>
  </div>
  <div class="callout-content">
    <p>High voltage area — do not touch unless instructed.</p>
  </div>
</div>
<div class="callout success">
  <div class="callout-header">
    <span class="icon">✅</span>
    <h4>Success</h4>
  </div>
  <div class="callout-content">
    <p>Operation completed successfully. You can now continue.</p>
  </div>
</div>
<!-- 更多样式可自行添加 -->
</body>
</html>
  • VSCE主题

    思源笔记的 VSCode Lite Edit 主题,仓库地址为:GitHub。可在集市中搜索下载。

    10 引用 • 41 回帖 • 1 关注
  • 思源笔记

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

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

    25923 引用 • 107436 回帖 • 1 关注

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 感谢兄弟,这下明白 callout 是什么玩意儿了 😁

    1 回复
  • NorthCJ

    对你有帮助就好

  • NorthCJ

    11.png

    这个是使用的效果图

  • EmptyLight

    感谢你的帖子,我突然发现可以用引述块做出类似 callout 的效果,我去看看差不多有什么类型的 callout 可以写,也希望你能提出一些建议。

    1 回复
    1 操作
    EmptyLight 在 2025-06-07 20:15:47 更新了该回帖
  • NorthCJ

    那就麻烦大佬了~

    1 回复
  • EmptyLight

    2.3.1 版本已经发布,晚点应该就更新上去了。感谢你的帖子启发我了。

请输入回帖内容 ...