【已解决】Callout实现标题背景单独填充

疑问解答
1

请仔细说明自己遇到的问题，以下是参考模板。这里不要求非得按模板发帖，但内容中包含相关要素能让大家更好地帮助你。

遇到的问题

Callout只有一个浅色地背景框，如何实现标题背景单独填充深色（如图）的效果？

预期的效果

QQ_1769845792184
QQ_17698457921841023×574 35.1 KB

已尝试的解决方案

1 个赞
2

用AI写了一下

/* 外框 + 背景（整块） */
.markdown-source-view.mod-cm6 .cm-embed-block.cm-callout .callout{
  /* 你想要的红色 */
  --my-callout-red: #d64a4a;

  padding: 0;                       /* 让顶栏能贴边 */
  border: 2px solid var(--my-callout-red);
  border-radius: 4px;
  background: #fbefef;              /* 内容区域底色（淡红） */
  overflow: hidden;                 /* 让顶栏圆角不露白 */
}

/* 顶部标题条 */
.markdown-source-view.mod-cm6 .cm-embed-block.cm-callout .callout-title{
  background: var(--my-callout-red);
  color: #fff;
  padding: 8px 12px;
  margin: 0;

  display: flex;
  align-items: center;
  gap: 8px;

  font-weight: 700;
  line-height: 1.2;
}

/* 标题左侧图标改成白色（铅笔） */
.markdown-source-view.mod-cm6 .cm-embed-block.cm-callout .callout-title .callout-icon,
.markdown-source-view.mod-cm6 .cm-embed-block.cm-callout .callout-title .callout-icon svg{
  color: #fff;
  stroke: currentColor;
}

/* 内容区（让内容有内边距） */
.markdown-source-view.mod-cm6 .cm-embed-block.cm-callout .callout-content{
  padding: 12px;
  background: transparent;          /* 背景由 .callout 提供 */
  color: var(--text-normal);
}

.markdown-source-view.mod-cm6 .cm-embed-block.cm-callout .edit-block-button svg{
  color: rgba(255,255,255,0.9);
  stroke: currentColor;
}
1 个赞
3

非常感谢。
请问这段代码我要写在哪里？
可不可以实现自定义callout，比如分别填入不同的代码，预设好不同样式的callout
谢谢！

4

可以，想怎么改都可以

在外观设置的最下面，有个CSS片段，放在那里面

5

已解决，非常感谢！！！