样式如图
使用主题
这里我使用的是 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>
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于