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