多种风格标题及高亮样式

[nilmarko]

孟菲斯风格标题样式

/* Memphis Design — Obsidian Heading Styles */
/* 保存为 memphis-headings.css，放入 .obsidian/snippets/ 后在外观设置中启用 */

/* ── H1 黄色实心块 + 双重边框 + 阴影 ── */
.markdown-preview-view h1,  
.markdown-rendered h1 {
  font-size: 1.9em;
  font-weight: 900;
  padding: 0.25em 0.6em 0.25em 0.9em;
  background: #FFE033;
  color: #111;
  border-left: 7px solid #111;
  border-top: 3px solid #111;
  border-bottom: 3px solid #111;
  border-right: 3px solid #111;
  box-shadow: 5px 5px 0 #111;
  display: inline-block;
  margin-bottom: 1.2em;
  letter-spacing: -0.01em;
}

.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-1 .cm-header {
  font-size: 1.9em ;
  font-weight: 900;
  padding: 0.25em 0.6em 0.25em 0.9em;
  background: #FFE033;
  color: #111;
  border-left: 7px solid #111;
  border-top: 3px solid #111;
  border-bottom: 3px solid #111;
  border-right: 3px solid #111;
  box-shadow: 5px 5px 0 #111;
  display: inline-block;
  margin-bottom: 1.2em;
  letter-spacing: -0.01em;
}


/* ── H2 粉红块 + 偏移阴影 ── */
.markdown-preview-view h2,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-2 .cm-header {
  font-size: 1.5em;
  font-weight: 800;
  padding: 0.2em 0.7em;
  background: #FF6B9D;
  color: #fff;
  border: 3px solid #111;
  box-shadow: 4px 4px 0 #111;
  display: inline-block;
  margin-bottom: 1.1em;
}

/* ── H3 青色块 + 波浪线伸出框外 ── */
.markdown-preview-view h3,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-3 .cm-header {
  font-size: 1.25em;
  font-weight: 700;
  padding: 0.15em 0.5em;
  background: #00D4C8;
  color: #111;
  border: 2.5px solid #111;
  box-shadow: 3px 3px 0 #111;
  display: inline-block;
  margin-bottom: 1.6em;
  position: relative;
  overflow: visible;
}

.markdown-preview-view h3::after,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-3 .cm-header::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: -3px;
  right: -3px;
  height: 5px;
  background: repeating-linear-gradient(
    90deg,
    #FF6B9D 0, #FF6B9D 8px,
    transparent 8px, transparent 12px
  );
}

/* ── H4 橙色块 + 三角放大 ── */
.markdown-preview-view h4,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-4 .cm-header {
  font-size: 1.08em;
  font-weight: 800;
  padding: 0.18em 0.6em 0.18em 1.6em;
  background: #FF7A1A;
  color: #fff;
  border: 2.5px solid #111;
  box-shadow: 3px 3px 0 #111;
  display: inline-block;
  margin-bottom: 1em;
  letter-spacing: 0.01em;
  position: relative;
}

.markdown-preview-view h4::before,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-4 .cm-header::before {
  content: '';
  position: absolute;
  left: 0.6em;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 11px solid #FFE033;
}

/* ── H5 紫色块 + 圆点 ── */
.markdown-preview-view h5,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-5 .cm-header {
  font-size: 0.95em;
  font-weight: 800;
  padding: 0.15em 0.55em 0.15em 1.5em;
  background: #7B2FBE;
  color: #fff;
  border: 2px solid #111;
  box-shadow: 2px 2px 0 #111;
  display: inline-block;
  margin-bottom: 0.9em;
  letter-spacing: 0.02em;
  position: relative;
}

.markdown-preview-view h5::before,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-5 .cm-header::before {
  content: '';
  position: absolute;
  left: 0.7em;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FF6B9D;
}

/* ── H6 红色块 + 方块放大 ── */
.markdown-preview-view h6,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-6 .cm-header {
  font-size: 0.82em;
  font-weight: 800;
  padding: 0.12em 0.5em 0.12em 1.5em;
  background: #E02020;
  color: #fff;
  border: 2px solid #111;
  box-shadow: 2px 2px 0 #111;
  display: inline-block;
  margin-bottom: 0.8em;
  letter-spacing: 0.05em;
  position: relative;
}

.markdown-preview-view h6::before,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-6 .cm-header::before {
  content: '';
  position: absolute;
  left: 0.5em;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: #FFE033;
}

[我考系解]

我用的anu主题，似乎不能正常显示。

[nilmarko]

修改了一下 再试试看

[Stargazer]

挺好看的，就是在实时阅览模式下显示会有一些问题，尤其是当标题中含有链接时。

[nilmarko]

搞不定的, Obsidian的CodeMirror6渲染层对伪元素支持不稳定

[Stargazer]

那css确实解决不了，再搞个插件倒不至于，目前也能用

[nilmarko]

孟菲斯风格高亮40组

孟菲斯风格高亮40组

/* 配合Regex-Css-Highlighter使用 */
.hl-1 {
  background: #FFE033;
  color: #111;
  font-weight: bold;
  padding: 1px 6px;
  border-left: 4px solid #111;
  border-top: 1.5px solid #111;
  border-bottom: 1.5px solid #111;
  border-right: 1.5px solid #111;
  box-shadow: 3px 3px 0 #111;
}

.hl-2 {
  background: #FF6B9D;
  color: #fff;
  font-weight: bold;
  padding: 1px 6px;
  border: 2px solid #111;
  box-shadow: 3px 3px 0 #111;
}

.hl-3 {
  background: #00D4C8;
  color: #111;
  font-weight: bold;
  padding: 1px 6px 3px;
  border: 1.5px solid #111;
  border-bottom: 3px dotted #FF6B9D;
  box-shadow: 2px 2px 0 #111;
}

.hl-4 {
  background: #FF7A1A;
  color: #fff;
  font-weight: bold;
  padding: 1px 6px 1px 12px;
  border: 2px solid #111;
  box-shadow: 3px 3px 0 #111;
  position: relative;
  display: inline-block;
}
.hl-4::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid #FFE033;
}

.hl-5 {
  background: #7B2FBE;
  color: #fff;
  font-weight: bold;
  padding: 1px 6px;
  border: 2px dashed #FFE033;
  box-shadow: 3px 3px 0 #111;
}

.hl-6 {
  background: #E02020;
  color: #fff;
  font-weight: bold;
  padding: 1px 7px;
  border: 3px double #FFE033;
  box-shadow: 3px 3px 0 #111;
}

.hl-7 {
  background: #111;
  color: #FFE033;
  font-weight: bold;
  padding: 1px 6px;
  border: 2px solid #FFE033;
  box-shadow: 3px 3px 0 #FF6B9D;
}

.hl-8 {
  background: #fff;
  color: #111;
  font-weight: bold;
  padding: 1px 6px;
  border-left: 5px solid #FF7A1A;
  border-top: 1.5px solid #111;
  border-bottom: 1.5px solid #111;
  border-right: 1.5px solid #111;
  box-shadow: 3px 3px 0 #00D4C8;
}

.hl-9 {
  background: #39D353;
  color: #111;
  font-weight: bold;
  padding: 1px 6px;
  border: 2px solid #111;
  border-bottom: 3px dashed #7B2FBE;
  box-shadow: 3px 3px 0 #111;
}

.hl-10 {
  background: #2979FF;
  color: #fff;
  font-weight: bold;
  padding: 1px 6px;
  border: 2px solid #111;
  box-shadow: 3px 3px 0 #FF6B9D;
}

/* HL-11 深绿底白字，金色双线边框 */
.hl-11 {
  background: #1B6B3A;
  color: #fff;
  font-weight: bold;
  padding: 2px 7px;
  border: 3px double #FFE033;
  box-shadow: 3px 3px 0 #111;
}

/* HL-12 米白底深棕字，橙色粗底边 */
.hl-12 {
  background: #FFF3CD;
  color: #5c2a00;
  font-weight: bold;
  padding: 2px 7px 4px;
  border-top: 1.5px solid #5c2a00;
  border-left: 1.5px solid #5c2a00;
  border-right: 1.5px solid #5c2a00;
  border-bottom: 4px solid #FF7A1A;
  box-shadow: 3px 3px 0 #5c2a00;
}

/* HL-13 深蓝底白字，青色虚线边框 */
.hl-13 {
  background: #0D2B6B;
  color: #fff;
  font-weight: bold;
  padding: 2px 7px;
  border: 2px dashed #00D4C8;
  box-shadow: 3px 3px 0 #00D4C8;
}

/* HL-14 浅粉底黑字，粉色粗左线 */
.hl-14 {
  background: #FFD6E8;
  color: #111;
  font-weight: bold;
  padding: 2px 7px;
  border-left: 5px solid #FF6B9D;
  border-top: 1.5px solid #111;
  border-bottom: 1.5px solid #111;
  border-right: 1.5px solid #111;
  box-shadow: 3px 3px 0 #FF6B9D;
}

/* HL-15 黄绿底黑字，紫色点状底线 */
.hl-15 {
  background: #C6F135;
  color: #111;
  font-weight: bold;
  padding: 2px 7px 4px;
  border-top: 1.5px solid #111;
  border-left: 1.5px solid #111;
  border-right: 1.5px solid #111;
  border-bottom: 3px dotted #7B2FBE;
  box-shadow: 3px 3px 0 #111;
}

/* HL-16 深紫底金字，橙色阴影 */
.hl-16 {
  background: #2D0060;
  color: #FFE033;
  font-weight: bold;
  padding: 2px 7px;
  border: 2px solid #FFE033;
  box-shadow: 3px 3px 0 #FF7A1A;
}

/* HL-17 白底黑字，粉顶线+青底线 */
.hl-17 {
  background: #fff;
  color: #111;
  font-weight: bold;
  padding: 2px 7px;
  border-top: 3px solid #FF6B9D;
  border-bottom: 3px solid #00D4C8;
  border-left: 1.5px solid #111;
  border-right: 1.5px solid #111;
  box-shadow: 3px 3px 0 #111;
}

/* HL-18 橙红底白字，绿色阴影 */
.hl-18 {
  background: #FF3D00;
  color: #fff;
  font-weight: bold;
  padding: 2px 7px;
  border: 2px solid #111;
  box-shadow: 3px 3px 0 #39D353;
}

/* HL-19 黑底粉字，青色双线边框 */
.hl-19 {
  background: #111;
  color: #FF6B9D;
  font-weight: bold;
  padding: 2px 8px;
  border: 3px double #00D4C8;
  box-shadow: 3px 3px 0 #00D4C8;
}

/* HL-20 金底深棕字，红色右三角 */
.hl-20 {
  background: #FFC107;
  color: #3E1F00;
  font-weight: bold;
  padding: 2px 14px 2px 7px;
  border: 2px solid #111;
  box-shadow: 3px 3px 0 #111;
  display: inline-block;
  position: relative;
}
.hl-20::after {
  content: '';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-right: 5px solid #E02020;
}

/* HL-21 珊瑚红底白字，黄色粗左线 */
.hl-21 {
  background: #FF5252; color: #fff; font-weight: bold; padding: 2px 7px;
  border-left: 5px solid #FFE033;
  border-top: 1.5px solid #111; border-bottom: 1.5px solid #111; border-right: 1.5px solid #111;
  box-shadow: 4px 4px 0 #111;
}

/* HL-22 深棕底奶白字，橙色虚线边框 */
.hl-22 {
  background: #3E1F00; color: #FFF3CD; font-weight: bold; padding: 2px 7px;
  border: 2px dashed #FF7A1A; box-shadow: 3px 3px 0 #FF7A1A;
}

/* HL-23 天蓝底黑字，粉色粗左线+粉阴影 */
.hl-23 {
  background: #40C4FF; color: #111; font-weight: bold; padding: 2px 7px;
  border-left: 5px solid #FF6B9D;
  border-top: 1.5px solid #111; border-bottom: 1.5px solid #111; border-right: 1.5px solid #111;
  box-shadow: 3px 3px 0 #FF6B9D;
}

/* HL-24 黑底青字，黄色点状边框 */
.hl-24 {
  background: #111; color: #00D4C8; font-weight: bold; padding: 2px 7px;
  border: 2px dotted #FFE033; box-shadow: 3px 3px 0 #FFE033;
}

/* HL-25 浅紫底深紫字，橙色粗底边 */
.hl-25 {
  background: #E8D5FF; color: #2D0060; font-weight: bold; padding: 2px 7px 4px;
  border-top: 1.5px solid #7B2FBE; border-left: 1.5px solid #7B2FBE;
  border-right: 1.5px solid #7B2FBE; border-bottom: 4px solid #FF7A1A;
  box-shadow: 3px 3px 0 #7B2FBE;
}

/* HL-26 白底黑字，粉顶线+黄底线，无左右边框 */
.hl-26 {
  background: #fff; color: #111; font-weight: bold; padding: 2px 7px;
  border-top: 3px solid #FF6B9D; border-bottom: 3px solid #FFE033;
  border-left: none; border-right: none;
  box-shadow: 3px 3px 0 #111;
}

/* HL-27 深青底白字，粉色双线边框 */
.hl-27 {
  background: #006064; color: #fff; font-weight: bold; padding: 2px 8px;
  border: 3px double #FF6B9D; box-shadow: 3px 3px 0 #FF6B9D;
}

/* HL-28 亮橙底黑字，蓝色粗左线+蓝阴影 */
.hl-28 {
  background: #FFB300; color: #111; font-weight: bold; padding: 2px 7px;
  border-left: 5px solid #2979FF;
  border-top: 1.5px solid #111; border-bottom: 1.5px solid #111; border-right: 1.5px solid #111;
  box-shadow: 3px 3px 0 #2979FF;
}

/* HL-29 玫红底白字，绿色虚线边框+绿阴影 */
.hl-29 {
  background: #E91E8C; color: #fff; font-weight: bold; padding: 2px 7px;
  border: 2px dashed #39D353; box-shadow: 3px 3px 0 #39D353;
}

/* HL-30 灰底黑字，三色渐变底边（粉+黄+青） */
.hl-30 {
  background: #E0E0E0; color: #111; font-weight: bold; padding: 2px 7px 5px;
  border-top: 1.5px solid #111; border-left: 1.5px solid #111; border-right: 1.5px solid #111;
  border-bottom: 4px solid transparent;
  background-image: linear-gradient(#E0E0E0, #E0E0E0),
    linear-gradient(90deg, #FF6B9D 0% 33%, #FFE033 33% 66%, #00D4C8 66% 100%);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  box-shadow: 3px 3px 0 #111;
}

/* HL-31 柠檬黄底黑字，蓝色粗左线+蓝阴影 */
.hl-31 {
  background: #F4FF00; color: #111; font-weight: bold; padding: 2px 7px;
  border-left: 5px solid #2979FF;
  border-top: 1.5px solid #111; border-bottom: 1.5px solid #111; border-right: 1.5px solid #111;
  box-shadow: 3px 3px 0 #2979FF;
}

/* HL-32 深海蓝底白字，金色粗左线+黑阴影 */
.hl-32 {
  background: #01579B; color: #fff; font-weight: bold; padding: 2px 7px;
  border-left: 5px solid #FFE033;
  border-top: 1.5px solid #111; border-bottom: 1.5px solid #111; border-right: 1.5px solid #111;
  box-shadow: 3px 3px 0 #111;
}

/* HL-33 白底黑字，橙左+紫右不对称粗线 */
.hl-33 {
  background: #fff; color: #111; font-weight: bold; padding: 2px 7px;
  border-left: 5px solid #FF7A1A; border-right: 5px solid #7B2FBE;
  border-top: 1.5px solid #111; border-bottom: 1.5px solid #111;
  box-shadow: 3px 3px 0 #111;
}

/* HL-34 亮粉底黑字，青色双线边框 */
.hl-34 {
  background: #FF80AB; color: #111; font-weight: bold; padding: 2px 8px;
  border: 3px double #00D4C8; box-shadow: 3px 3px 0 #111;
}

/* HL-35 炭灰底白字，红色虚线边框+红阴影 */
.hl-35 {
  background: #37474F; color: #fff; font-weight: bold; padding: 2px 7px;
  border: 2px dashed #E02020; box-shadow: 3px 3px 0 #E02020;
}

/* HL-36 浅青底黑字，紫色粗顶线，无左右边框 */
.hl-36 {
  background: #B2EBF2; color: #111; font-weight: bold; padding: 2px 7px;
  border-top: 4px solid #7B2FBE; border-bottom: 1.5px solid #111;
  border-left: none; border-right: none;
  box-shadow: 3px 3px 0 #111;
}

/* HL-37 黑底白字，粉色内框+黄色外虚线outline */
.hl-37 {
  background: #111; color: #fff; font-weight: bold; padding: 2px 7px;
  border: 2px solid #FF6B9D;
  outline: 2px dashed #FFE033; outline-offset: 2px;
  display: inline;
}

/* HL-38 橄榄绿底白字，粉色虚线底边 */
.hl-38 {
  background: #558B2F; color: #fff; font-weight: bold; padding: 2px 7px 4px;
  border-top: 1.5px solid #111; border-left: 1.5px solid #111; border-right: 1.5px solid #111;
  border-bottom: 3px dashed #FF6B9D;
  box-shadow: 3px 3px 0 #111;
}

/* HL-39 浅橙底深棕字，黑色粗顶线+橙阴影 */
.hl-39 {
  background: #FFE0B2; color: #3E1F00; font-weight: bold; padding: 2px 7px;
  border-top: 4px solid #111;
  border-left: 1.5px solid #111; border-right: 1.5px solid #111; border-bottom: 1.5px solid #111;
  box-shadow: 3px 3px 0 #FF7A1A;
}

/* HL-40 品红底白字，黄色点状边框+绿阴影 */
.hl-40 {
  background: #AD1457; color: #fff; font-weight: bold; padding: 2px 7px;
  border: 2px dotted #FFE033; box-shadow: 3px 3px 0 #39D353;
}

[Stargazer]

Regex-Css-Highlighter能实时修改标题的样式吗？这么多样式，要是能选择切换就好了

[nilmarko]

v1.2.8.9可以添加为标题样式了
百度网盘 请输入提取码 提取码: 4dtm

插件, 正则css高亮(regex css highlighter)

Regex-Css-Highlighter 插件介绍 基于正则表达式的文本高亮 ：使用灵活的正则表达式语法匹配您想要高亮的文本 - 双模式支持 ：在阅读模式和实时预览模式下都能正常工作 阅读模式下高亮可能有遗漏, 暂未修复 文件特定规则和全局规则 ：可以为特定文件设置专用高亮规则，也可以创建全局应用的规则 自定义 CSS 样式 ：通过内置的 CSS 编辑器，为每个高亮规则创建独…

[熊猫别熬夜 (噗~)]

好像阅读模式下，标题会叠加在一起，应该是阅读模式下display:inline-block;的问题，我设置了下编辑模式下用display:inline-block;，阅读模式下用 display: block; width: fit-content;就好了。

修改的css源码如下：

/* 来源：https://forum-zh.obsidian.md/t/topic/60218 */
/* Memphis Design — Obsidian Heading Styles */
/* 保存为 memphis-headings.css，放入 .obsidian/snippets/ 后在外观设置中启用 */

/* ── H1 黄色实心块 + 双重边框 + 阴影 ── */
.markdown-preview-view h1,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-1 .cm-header {
  /* font-size: 1.9em;
  font-weight: 900; */
  padding: 0.25em 0.6em 0.25em 0.9em;
  background: #FFE033;
  color: #111;
  border-left: 7px solid #111;
  border-top: 3px solid #111;
  border-bottom: 3px solid #111;
  border-right: 3px solid #111;
  box-shadow: 5px 5px 0 #111;
  margin-bottom: 1.2em;
  letter-spacing: -0.01em;
}

.markdown-preview-view h1 {
  display: block;
  width: fit-content;
}

.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-1 .cm-header {
  display: inline-block;
}

/* ── H2 粉红块 + 偏移阴影 ── */
.markdown-preview-view h2,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-2 .cm-header {
  /* font-size: 1.5em;
  font-weight: 800; */
  padding: 0.2em 0.7em;
  background: #FF6B9D;
  color: #fff;
  border: 3px solid #111;
  box-shadow: 4px 4px 0 #111;
  margin-bottom: 1.1em;
}

.markdown-preview-view h2 {
  display: block;
  width: fit-content;
}

.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-2 .cm-header {
  display: inline-block;
}

/* ── H3 青色块 + 波浪线伸出框外 ── */
.markdown-preview-view h3,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-3 .cm-header {
  /* font-size: 1.25em;
  font-weight: 700; */
  padding: 0.15em 0.5em;
  background: #00D4C8;
  color: #111;
  border: 2.5px solid #111;
  box-shadow: 3px 3px 0 #111;
  margin-bottom: 1.6em;
  position: relative;
  overflow: visible;
}

.markdown-preview-view h3 {
  display: block;
  width: fit-content;
}

.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-3 .cm-header {
  display: inline-block;
}

.markdown-preview-view h3::after,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-3 .cm-header::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: -3px;
  right: -3px;
  height: 5px;
  background: repeating-linear-gradient(90deg,
      #FF6B9D 0, #FF6B9D 8px,
      transparent 8px, transparent 12px);
}

/* ── H4 橙色块 + 三角放大 ── */
.markdown-preview-view h4,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-4 .cm-header {
  /* font-size: 1.08em;
  font-weight: 800; */
  padding: 0.18em 0.6em 0.18em 1.6em;
  background: #FF7A1A;
  color: #fff;
  border: 2.5px solid #111;
  box-shadow: 3px 3px 0 #111;
  margin-bottom: 1em;
  letter-spacing: 0.01em;
  position: relative;
}

.markdown-preview-view h4 {
  display: block;
  width: fit-content;
}

.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-4 .cm-header {
  display: inline-block;
}

.markdown-preview-view h4::before,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-4 .cm-header::before {
  content: '';
  position: absolute;
  left: 0.6em;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 11px solid #FFE033;
}

/* ── H5 紫色块 + 圆点 ── */
.markdown-preview-view h5,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-5 .cm-header {
  /* font-size: 0.95em;
  font-weight: 800; */
  padding: 0.15em 0.55em 0.15em 1.5em;
  background: #7B2FBE;
  color: #fff;
  border: 2px solid #111;
  box-shadow: 2px 2px 0 #111;
  margin-bottom: 0.9em;
  letter-spacing: 0.02em;
  position: relative;
}

.markdown-preview-view h5 {
  display: block;
  width: fit-content;
}

.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-5 .cm-header {
  display: inline-block;
}

.markdown-preview-view h5::before,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-5 .cm-header::before {
  content: '';
  position: absolute;
  left: 0.7em;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FF6B9D;
}

/* ── H6 红色块 + 方块放大 ── */
.markdown-preview-view h6,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-6 .cm-header {
  /* font-size: 0.82em;
  font-weight: 800; */
  padding: 0.12em 0.5em 0.12em 1.5em;
  background: #E02020;
  color: #fff;
  border: 2px solid #111;
  box-shadow: 2px 2px 0 #111;
  margin-bottom: 0.8em;
  letter-spacing: 0.05em;
  position: relative;
}

.markdown-preview-view h6 {
  display: block;
  width: fit-content;
}

.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-6 .cm-header {
  display: inline-block;
}

.markdown-preview-view h6::before,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-6 .cm-header::before {
  content: '';
  position: absolute;
  left: 0.5em;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: #FFE033;
}

[nilmarko]

糖果风格 标题样式:

糖果风格标题样式css

/* ============================
   🍭 Candy Headings for Obsidian
   ============================ */

/* H1 — 渐变糖果彩色大标题 */
/* 
.markdown-preview-view h1,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-1 .cm-header-1 
  */
.markdown-preview-view h1,  
.markdown-rendered h1{
   font-family: 'KaiTi', 'STKaiti', '楷体', cursive;   
  font-size: 3em;
  font-weight: 400;  
   background: linear-gradient(135deg, #ff6eb4, #ff9a3c, #ffe44d);  
   -webkit-background-clip: text;  
   -webkit-text-fill-color: transparent;
 /*   background-clip: text;    */
   border-bottom: 3px solid #ff6eb4;  
   padding-bottom: 6px;  
  
}  
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-1 .cm-header{
   font-family: 'KaiTi', 'STKaiti', '楷体', cursive;   
  font-size: 1.8em !important;    
  font-weight: 400;  
   background: linear-gradient(135deg, #ff6eb4, #ff9a3c, #ffe44d);  
   -webkit-background-clip: text;  
   -webkit-text-fill-color: transparent;
 /*   background-clip: text;    */
   border-bottom: 3px solid #ff6eb4;  
   padding-bottom: 6px;  
  
}  


.markdown-preview-view h1::before,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-1 .cm-header::before { content: "🍭 " ; }

.markdown-preview-view h1::after,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-1 .cm-header::after {
  content: " h1";
  font-size: 0.4em;
  font-family: 'KaiTi', 'STKaiti', '楷体', cursive; 
  font-weight: 600;
  color: #ffaad9;
  vertical-align: middle;
  /* opacity: 0.8;    */
}

.markdown-preview-view h1 {
  display: block;
  width: fit-content;
}

.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-1 .cm-header-1 {
  display: inline-block;
}




.markdown-preview-view h2,  
.markdown-rendered h2 {
  font-family: 'KaiTi', 'STKaiti', '楷体', cursive;
  font-size: 2.5em ;
  font-weight: 400;
  color: #ff6eb4;
  background: linear-gradient(90deg, #fff0f8 0%, transparent 80%);
  
  border-bottom: none;
  border-radius: 0 8px 8px 0;
  padding: 4px 12px;
}


.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-2 .cm-header-2 {
  font-family: 'KaiTi', 'STKaiti', '楷体', cursive;
  font-size: 1.7em !important;
  font-weight: 400;
  color: #ff6eb4;
  background: linear-gradient(90deg, #fff0f8 0%, transparent 80%);
  
  border-bottom: none;
  border-radius: 0 8px 8px 0;
  padding: 4px 12px;
}
/* 
.markdown-preview-view h2 {
  display: block;
  width: fit-content;
}

.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-2 .cm-header-2 {
  display: inline-block;
}
  */
.markdown-preview-view h2::before,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-2 .cm-header-2::before { content: "🍬 "; }

.markdown-preview-view h2::after,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-2 .cm-header-2::after {
  content: " h2";
  font-size: 0.45em;
  font-family: 'KaiTi', 'STKaiti', '楷体', cursive;
  font-weight: 400;
  color: #ffaad9;
  vertical-align: middle;
  opacity: 0.8;
}



.markdown-preview-view h3,  
.markdown-rendered h3 {
  font-family: 'KaiTi', 'STKaiti', '楷体', cursive;
  font-size: 2em;
  font-weight: 700 ;
  color: #9b5fe0;
  background: linear-gradient(90deg, #f4ecff 0%, transparent 70%);

  border-bottom: none;
  border-radius: 0 6px 6px 0;
  padding: 3px 10px;
}


.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-3 .cm-header-3 {
  font-family: 'KaiTi', 'STKaiti', '楷体', cursive;
  font-size: 1.4em !important;
  font-weight: 700 ;
  color: #9b5fe0;
  background: linear-gradient(90deg, #f4ecff 0%, transparent 70%);

  border-bottom: none;
  border-radius: 0 6px 6px 0;
  padding: 3px 10px;
}


.markdown-preview-view h3 {
  display: block;
  width: fit-content;
}

.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-3 .cm-header-3 {
  display: inline-block;
}

.markdown-preview-view h3::before,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-3 .cm-header-3::before { content: "💜 " ; }
.markdown-preview-view h3::after,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-3 .cm-header-3::after {
  content: " h3";
  font-size: 0.45em;
  font-family: 'KaiTi', 'STKaiti', '楷体', cursive;
  font-weight: 600;
  color: #c77dff;
  vertical-align: middle;
  opacity: 0.8;
}



.markdown-preview-view h4,  
.markdown-rendered h4 {
  font-family: 'KaiTi', 'STKaiti', '楷体', cursive;
  font-size: 1.5em;
  font-weight: 700 ;
  color: #1a9c8a;
  background: linear-gradient(90deg, #e0f7f4 0%, transparent 70%);
  
  border-bottom: none;
  border-radius: 0 6px 6px 0;
  padding: 3px 10px;
}

.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-4 .cm-header-4 {
  font-family: 'KaiTi', 'STKaiti', '楷体', cursive;
  font-size: 1.2em !important;
  font-weight: 700 ;
  color: #1a9c8a;
  background: linear-gradient(90deg, #e0f7f4 0%, transparent 70%);
  
  border-bottom: none;
  border-radius: 0 6px 6px 0;
  padding: 3px 10px;
}


.markdown-preview-view h4 {
  display: block;
  width: fit-content;
}

.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-4 .cm-header-4 {
  display: inline-block;
}

.markdown-preview-view h4::before,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-4 .cm-header-4::before { content: "🌿 " ; }
.markdown-preview-view h4::after,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-4 .cm-header-4::after {
  content: " h4";
  font-size: 0.45em;
  font-family: 'KaiTi', 'STKaiti', '楷体', cursive;
  font-weight: 600;
  color: #4ecdc4;
  vertical-align: middle;
  opacity: 0.8;
}



.markdown-preview-view h5,  
.markdown-rendered h5 {

  font-family: 'KaiTi', 'STKaiti', '楷体', cursive;
  font-size: 1.3em;
  font-weight: 700 ;
  color: #e06c2c;
  background: linear-gradient(90deg, #fff4e6 0%, transparent 70%);
  
  border-bottom: none;
  border-radius: 0 6px 6px 0;
  padding: 3px 10px;
}

.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-5 .cm-header-5 {

  font-family: 'KaiTi', 'STKaiti', '楷体', cursive;
  font-size: 1em !important;
  font-weight: 700 ;
  color: #e06c2c;
  background: linear-gradient(90deg, #fff4e6 0%, transparent 70%);
  
  border-bottom: none;
  border-radius: 0 6px 6px 0;
  padding: 3px 10px;
}

.markdown-preview-view h5 {
  display: block;
  width: fit-content;
}

.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-5 .cm-header-5 {
  display: inline-block;
}

.markdown-preview-view h5::before,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-5 .cm-header-5::before { content: "🍊 " ; }
.markdown-preview-view h5::after,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-5 .cm-header-5::after {
  content: " h5";
  font-size: 0.45em;
  font-family: 'KaiTi', 'STKaiti', '楷体', cursive;
  font-weight: 600;
  color: #ffb347;
  vertical-align: middle;
  opacity: 0.8;
}



.markdown-preview-view h6,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-6 .cm-header-6 {
  font-family: 'KaiTi', 'STKaiti', '楷体', cursive;
  font-size: 0.8em;
  font-weight: 500 ;
  color: #9b5fe0;
  border-bottom: none;
  background-image: radial-gradient(circle, #ff6eb4 2px, transparent 2px),
                    radial-gradient(circle, #c77dff 2px, transparent 2px),
                    radial-gradient(circle, #5bc8f5 2px, transparent 2px),
                    radial-gradient(circle, #ffb347 2px, transparent 2px);
  background-size: 12px 4px, 12px 4px, 12px 4px, 12px 4px;
  background-position: 0 100%, 3px 100%, 6px 100%, 9px 100%;
  background-repeat: repeat-x;
  padding-bottom: 6px;
}

.markdown-preview-view h6 {
  display: block;
  width: fit-content;
}

.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-6 .cm-header-6 {
  display: inline-block;
}

.markdown-preview-view h6::before,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-6 .cm-header-6::before { content: "🍡 " ; }
.markdown-preview-view h6::after,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-6 .cm-header-6::after {
  content: " h6";
  font-size: 0.6em;
  font-family: 'KaiTi', 'STKaiti', '楷体', cursive;
  font-weight: 400;
  color: #c77dff;
  vertical-align: middle;
  opacity: 0.8;
}

[nilmarko]

哈利波特风格标题样式及50组高亮样式

标题样式:

哈利波特风格标题样式css

/* H1 */
.markdown-preview-view h1,
.markdown-rendered h1,
.HyperMD-header.HyperMD-header-1 .cm-header-1 {
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, 'Times New Roman', serif;
  font-size: 1.8em;
  font-weight: 900;
  color: #8b6914;
  text-align: center;
  letter-spacing: 0.06em;
  border-top: 3px solid #c9a84c;
  border-bottom: 3px solid #c9a84c;
  padding: 0.5em 0;
  margin: 1.2em 2rem;
}
.markdown-preview-view h1::after,
.markdown-rendered h1::after,
.HyperMD-header.HyperMD-header-1 .cm-header-1::after {
  content: ' ✦ I';
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
  font-size: 0.45em;
  font-weight: 400;
  font-style: italic;
  color: #c9a84c;
  letter-spacing: 0.2em;
  vertical-align: middle;
  margin-left: 0.6em;
  opacity: 0.8;
}

/* H2 */
.markdown-preview-view h2,
.markdown-rendered h2,
.HyperMD-header.HyperMD-header-2 .cm-header-2 {
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, 'Times New Roman', serif;
  font-size: 1.3em;
  font-weight: 700;
  color: #7b1c1c;
  border-left: 4px double #7b1c1c;
  border-bottom: 1px solid #c9a84c;
  padding: 0.3em 0 0.3em 0.8em;
  letter-spacing: 0.04em;
}
.markdown-preview-view h2::after,
.markdown-rendered h2::after,
.HyperMD-header.HyperMD-header-2 .cm-header-2::after {
  content: ' § II';
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
  font-size: 0.55em;
  font-weight: 400;
  font-style: italic;
  color: #c9a84c;
  letter-spacing: 0.15em;
  vertical-align: middle;
  margin-left: 0.5em;
  opacity: 0.75;
}

/* H3 */
.markdown-preview-view h3,
.markdown-rendered h3,
.HyperMD-header.HyperMD-header-3 .cm-header-3 {
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, 'Times New Roman', serif;
  font-size: 1.1em;
  font-weight: 600;
  color: #2d1b4e;
  border-bottom: 1px solid rgba(45,27,78,0.2);
  padding-bottom: 0.2em;
}
.markdown-preview-view h3::after,
.markdown-rendered h3::after,
.HyperMD-header.HyperMD-header-3 .cm-header-3::after {
  content: ' ❧ III';
  font-family: Georgia, serif;
  font-size: 0.6em;
  font-weight: 400;
  font-style: italic;
  color: #7b6fa0;
  letter-spacing: 0.12em;
  vertical-align: middle;
  margin-left: 0.5em;
  opacity: 0.7;
}

/* H4 */
.markdown-preview-view h4,
.markdown-rendered h4,
.HyperMD-header.HyperMD-header-4 .cm-header-4 {
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  font-size: 1em;
  font-weight: 400;
  font-style: italic;
  color: #8b6914;
  padding-left: 1.2em;
}
.markdown-preview-view h4::after,
.markdown-rendered h4::after,
.HyperMD-header.HyperMD-header-4 .cm-header-4::after {
  content: ' iv';
  font-family: Georgia, serif;
  font-size: 0.65em;
  font-style: italic;
  color: #c9a84c;
  letter-spacing: 0.1em;
  vertical-align: middle;
  margin-left: 0.4em;
  opacity: 0.65;
}

/* H5 */
.markdown-preview-view h5,
.markdown-rendered h5,
.HyperMD-header.HyperMD-header-5 .cm-header-5 {
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.markdown-preview-view h5::after,
.markdown-rendered h5::after,
.HyperMD-header.HyperMD-header-5 .cm-header-5::after {
  content: ' v';
  font-size: 0.85em;
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  margin-left: 0.4em;
  opacity: 0.6;
}

/* H6 */
.markdown-preview-view h6,
.markdown-rendered h6,
.HyperMD-header.HyperMD-header-6 .cm-header-6 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.85em;
  font-style: italic;
  color: var(--text-faint);
  border-left: 2px solid var(--background-modifier-border);
  padding-left: 0.6em;
}
.markdown-preview-view h6::after,
.markdown-rendered h6::after,
.HyperMD-header.HyperMD-header-6 .cm-header-6::after {
  content: ' vi';
  font-size: 0.85em;
  color: var(--text-faint);
  letter-spacing: 0.08em;
  margin-left: 0.3em;
  opacity: 0.5;
}

.markdown-preview-view {
  display: block;
 /*  width: fit-content;  */
}
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header .cm-header {
  /* display: inline-block;  */
  display: block;
}```

50组高亮样式:

哈利波特风格高亮样式

/* ════════════════════════════════════════════
   Harry Potter Highlight System · 50组

/* ── A · 羊皮纸墨水系 (13组) ── */

mark.hp-parch-1 {
  background: #f5e6c8;
  color: #3d2b00;
  border-bottom: 2px solid #c9a84c;
  border-radius: 2px;
  padding: 1px 4px;
}
mark.hp-parch-2 {
  background: #ede0c4;
  color: #2a1a00;
  border-left: 3px solid #b8860b;
  border-radius: 0;
  padding: 1px 4px 1px 6px;
}
mark.hp-parch-3 {
  background: #f9f0dc;
  color: #4a3000;
  border: 1px solid #d4a843;
  border-radius: 3px;
  padding: 1px 5px;
}
mark.hp-parch-4 {
  background: #e8d5a3;
  color: #1a0f00;
  font-style: italic;
  border-bottom: 1px dashed #a0784a;
  border-radius: 2px;
  padding: 1px 4px;
}
mark.hp-parch-5 {
  background: transparent;
  color: #7b3f00;
  border-bottom: 2px solid #c9a84c;
  border-top: 2px solid #c9a84c;
  padding: 0 3px;
}
mark.hp-parch-6 {
  background: #f2e4c0;
  color: #5c3d00;
  border-right: 4px solid #8b6914;
  border-radius: 0;
  padding: 1px 6px 1px 4px;
}
mark.hp-parch-7 {
  background: #faf3e0;
  color: #3d2800;
  text-decoration: underline wavy #c9a84c;
  text-underline-offset: 3px;
  padding: 1px 4px;
}
mark.hp-parch-8 {
  background: #e0c88a;
  color: #1a0f00;
  letter-spacing: 0.04em;
  border-radius: 2px;
  padding: 1px 4px;
}
mark.hp-parch-9 {
  background: transparent;
  color: #5c3d00;
  text-shadow: 0 0 8px #c9a84c88;
  border-bottom: 1px solid #c9a84c;
  padding: 1px 4px;
}
mark.hp-parch-10 {
  background: #f7ecd1;
  color: #2d1c00;
  border: 1px double #b8860b;
  border-radius: 3px;
  padding: 1px 5px;
}
mark.hp-parch-11 {
  background: #dfc58a;
  color: #1a0800;
  font-variant: small-caps;
  border-radius: 2px;
  padding: 1px 4px;
}
mark.hp-parch-12 {
  background: #f0e2be;
  color: #3d2200;
  border-top: 1px solid #c9a84c;
  border-bottom: 1px solid #c9a84c;
  padding: 1px 4px;
}
mark.hp-parch-13 {
  background: transparent;
  color: #8b6914;
  border: 1px solid #c9a84c;
  border-radius: 10px;
  padding: 1px 8px;
}

/* ── B · 魔法咒语系 (12组) ── */

mark.hp-spell-1 {
  background: #e8e0f8;
  color: #2d1b4e;
  border-bottom: 2px solid #7b68ee;
  border-radius: 2px;
  padding: 1px 4px;
}
mark.hp-spell-2 {
  background: #d4c8f0;
  color: #1a0f3d;
  border-left: 3px solid #534ab7;
  border-radius: 0;
  padding: 1px 4px 1px 6px;
}
mark.hp-spell-3 {
  background: transparent;
  color: #534ab7;
  text-shadow: 0 0 10px #7b68ee99;
  border-bottom: 1px solid #afa9ec;
  padding: 1px 4px;
  animation: hp-spell-pulse 3s ease-in-out infinite;
}
mark.hp-spell-4 {
  background: #1a0f3d;
  color: #c8b8f0;
  border-radius: 3px;
  padding: 1px 5px;
  letter-spacing: 0.05em;
}
mark.hp-spell-5 {
  background: #eee8ff;
  color: #3c3489;
  border: 1px solid #afa9ec;
  border-radius: 3px;
  font-style: italic;
  padding: 1px 5px;
}
mark.hp-spell-6 {
  background: #c8b8f0;
  color: #26215c;
  font-variant: small-caps;
  border-radius: 2px;
  padding: 1px 4px;
}
mark.hp-spell-7 {
  background: transparent;
  color: #7f77dd;
  border-bottom: 2px double #7f77dd;
  padding: 1px 4px;
}
mark.hp-spell-8 {
  background: #f0ecff;
  color: #3c3489;
  border-top: 2px solid #7b68ee;
  border-bottom: 2px solid #7b68ee;
  padding: 1px 4px;
}
mark.hp-spell-9 {
  background: #2d1b4e;
  color: #eeedfe;
  border-left: 3px solid #afa9ec;
  border-radius: 0;
  padding: 1px 4px 1px 6px;
  animation: hp-flicker 4s step-end infinite;
}
mark.hp-spell-10 {
  background: #b8a8e8;
  color: #1a0f3d;
  border-radius: 10px;
  padding: 1px 8px;
}
mark.hp-spell-11 {
  background: transparent;
  color: #534ab7;
  border: 1px dashed #7f77dd;
  border-radius: 3px;
  padding: 1px 5px;
}
mark.hp-spell-12 {
  background: #e0d8ff;
  color: #26215c;
  border-right: 4px solid #534ab7;
  border-radius: 0;
  padding: 1px 6px 1px 4px;
}

/* ── C · 四大学院系 (13组) ── */

mark.hp-gryf-1 {
  background: #f5e0e0;
  color: #7b1c1c;
  border-bottom: 2px solid #7b1c1c;
  border-radius: 2px;
  padding: 1px 4px;
}
mark.hp-gryf-2 {
  background: #7b1c1c;
  color: #f5d78e;
  border-radius: 2px;
  padding: 1px 5px;
  font-variant: small-caps;
}
mark.hp-gryf-3 {
  background: #f9d58a;
  color: #7b1c1c;
  border-left: 3px solid #7b1c1c;
  border-radius: 0;
  padding: 1px 4px 1px 6px;
}
mark.hp-slyt-1 {
  background: #d8ede0;
  color: #0a3d20;
  border-bottom: 2px solid #1a6b3a;
  border-radius: 2px;
  padding: 1px 4px;
}
mark.hp-slyt-2 {
  background: #0a3d20;
  color: #c8c8c8;
  border-radius: 2px;
  padding: 1px 5px;
  letter-spacing: 0.04em;
}
mark.hp-slyt-3 {
  background: #c0d8c8;
  color: #0a3d20;
  border: 1px solid #1a6b3a;
  border-radius: 3px;
  font-style: italic;
  padding: 1px 5px;
}
mark.hp-rave-1 {
  background: #e0e8f5;
  color: #0a2050;
  border-bottom: 2px solid #1a3a8a;
  border-radius: 2px;
  padding: 1px 4px;
}
mark.hp-rave-2 {
  background: #1a3a8a;
  color: #c8a840;
  border-radius: 2px;
  padding: 1px 5px;
  font-variant: small-caps;
}
mark.hp-rave-3 {
  background: #b8c8e8;
  color: #0a2050;
  border-right: 4px solid #1a3a8a;
  border-radius: 0;
  padding: 1px 6px 1px 4px;
}
mark.hp-huff-1 {
  background: #fdf3d8;
  color: #3d2800;
  border-bottom: 2px solid #e0a800;
  border-radius: 2px;
  padding: 1px 4px;
}
mark.hp-huff-2 {
  background: #e0a800;
  color: #1a0f00;
  border-radius: 2px;
  padding: 1px 5px;
  font-variant: small-caps;
}
mark.hp-huff-3 {
  background: #f5e4a0;
  color: #3d2800;
  border: 1px solid #e0a800;
  border-radius: 3px;
  padding: 1px 5px;
}
mark.hp-house-4 {
  background: linear-gradient(90deg,#f5e0e0 0%,#f5e0e0 25%,#d8ede0 25%,#d8ede0 50%,#e0e8f5 50%,#e0e8f5 75%,#fdf3d8 75%);
  color: #1a1a1a;
  border-radius: 3px;
  font-variant: small-caps;
  padding: 1px 5px;
}

/* ── D · 黑魔法禁忌系 (12组) ── */

mark.hp-dark-1 {
  background: #1a0a0a;
  color: #cc2222;
  border-radius: 2px;
  padding: 1px 5px;
  letter-spacing: 0.05em;
}
mark.hp-dark-2 {
  background: transparent;
  color: #cc2222;
  border-bottom: 2px solid #8b0000;
  text-shadow: 0 0 8px #cc222255;
  padding: 1px 4px;
}
mark.hp-dark-3 {
  background: #0d1a0d;
  color: #2dcc2d;
  border-radius: 2px;
  padding: 1px 5px;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  animation: hp-flicker 5s step-end infinite;
}
mark.hp-dark-4 {
  background: #200a20;
  color: #cc44cc;
  border-left: 3px solid #8b008b;
  border-radius: 0;
  padding: 1px 4px 1px 6px;
}
mark.hp-dark-5 {
  background: transparent;
  color: #888;
  border-bottom: 1px solid #444;
  text-decoration: line-through;
  text-decoration-color: #cc2222;
  padding: 1px 4px;
}
mark.hp-dark-6 {
  background: #111;
  color: #666;
  border: 1px solid #333;
  border-radius: 3px;
  font-style: italic;
  letter-spacing: 0.03em;
  padding: 1px 5px;
}
mark.hp-dark-7 {
  background: #2a0000;
  color: #ff6666;
  border-top: 1px solid #8b0000;
  border-bottom: 1px solid #8b0000;
  padding: 1px 4px;
}
mark.hp-dark-8 {
  background: #0a000a;
  color: #bb88ff;
  border-radius: 2px;
  padding: 1px 5px;
  text-shadow: 0 0 10px #bb88ff66;
  animation: hp-spell-pulse 4s ease-in-out infinite;
}
mark.hp-dark-9 {
  background: #001a00;
  color: #44ff44;
  border: 1px dashed #2dcc2d;
  border-radius: 3px;
  padding: 1px 5px;
  font-variant: small-caps;
}
mark.hp-dark-10 {
  background: transparent;
  color: #444;
  border: 1px solid #555;
  border-radius: 10px;
  padding: 1px 8px;
  text-decoration: line-through;
}
mark.hp-dark-11 {
  background: #1a1a00;
  color: #cccc00;
  border-right: 4px solid #888800;
  border-radius: 0;
  letter-spacing: 0.04em;
  padding: 1px 6px 1px 4px;
}
mark.hp-dark-12 {
  background: #0a0a1a;
  color: #8888ff;
  border-bottom: 2px double #4444aa;
  font-style: italic;
  padding: 1px 4px;
}

/* ── 动画关键帧 ── */

@keyframes hp-spell-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
@keyframes hp-flicker {
  0%, 95%, 100% { opacity: 1; }
  96%, 99% { opacity: 0.3; }
}

哈利波特50组高亮, 中文类名+适量伪元素装饰版:

中文类名+适量伪元素装饰版

/* ════════════════════════════════════════════
   Harry Potter Highlight System · 50组 · 中文类名版
用法: 添加到Regex-css-Highlighter插件styles.css中, 重启插件.
════════════════════════════════════════════ */

/* ── A · 羊皮纸墨水系 ── */

.古卷封印 {
  background: #f5e6c8; color: #3d2b00;
  border-bottom: 2px solid #c9a84c;
  border-radius: 2px; padding: 1px 4px;
}
.古卷封印::before {
  content: '❧';
  font-size: 0.7em; color: #c9a84c;
  margin-right: 3px; opacity: 0.85;
}

.羊皮侧注 {
  background: #ede0c4; color: #2a1a00;
  border-left: 3px solid #b8860b;
  border-radius: 0; padding: 1px 4px 1px 6px;
}
.羊皮侧注::after {
  content: '§';
  font-size: 0.65em; color: #b8860b;
  margin-left: 4px; opacity: 0.7;
  vertical-align: super;
}

.金框要点 {
  background: #f9f0dc; color: #4a3000;
  border: 1px solid #d4a843;
  border-radius: 3px; padding: 1px 5px;
}
.金框要点::before { content: '✦'; font-size: 0.6em; color: #d4a843; margin-right: 4px; }
.金框要点::after  { content: '✦'; font-size: 0.6em; color: #d4a843; margin-left: 4px; }

.斜体批注 {
  background: #e8d5a3; color: #1a0f00;
  font-style: italic;
  border-bottom: 1px dashed #a0784a;
  border-radius: 2px; padding: 1px 4px;
}
.斜体批注::before { content: '\201C'; font-size: 1.1em; color: #a0784a; margin-right: 1px; font-style: normal; }
.斜体批注::after  { content: '\201D'; font-size: 1.1em; color: #a0784a; margin-left: 1px; font-style: normal; }

.双线强调 {
  background: transparent; color: #7b3f00;
  border-bottom: 2px solid #c9a84c;
  border-top: 2px solid #c9a84c;
  padding: 0 3px;
}
.双线强调::before { content: '\2014'; font-size: 0.75em; color: #c9a84c; margin-right: 3px; }
.双线强调::after  { content: '\2014'; font-size: 0.75em; color: #c9a84c; margin-left: 3px; }

.右侧金线 {
  background: #f2e4c0; color: #5c3d00;
  border-right: 4px solid #8b6914;
  border-radius: 0; padding: 1px 7px 1px 4px;
}
.右侧金线::after {
  content: '※';
  font-size: 0.6em; color: #8b6914;
  margin-left: 4px; vertical-align: super;
}

.波浪下划 {
  background: #faf3e0; color: #3d2800;
  text-decoration: underline wavy #c9a84c;
  text-underline-offset: 3px; padding: 1px 4px;
}
.波浪下划::before { content: '\301C'; font-size: 0.65em; color: #c9a84cb0; margin-right: 2px; }

.深金底色 {
  background: #e0c88a; color: #1a0f00;
  letter-spacing: 0.04em;
  border-radius: 2px; padding: 1px 4px;
}
.深金底色::before { content: '◈'; font-size: 0.6em; color: #8b6914; margin-right: 3px; }

.墨迹微光 {
  background: transparent; color: #5c3d00;
  text-shadow: 0 0 8px #c9a84c88;
  border-bottom: 1px solid #c9a84c; padding: 1px 4px;
}
.墨迹微光::after {
  content: '✧';
  font-size: 0.65em; color: #c9a84c;
  margin-left: 3px;
  animation: hp-twinkle 2s ease-in-out infinite;
}

.双线边框 {
  background: #f7ecd1; color: #2d1c00;
  border: 1px double #b8860b;
  border-radius: 3px; padding: 1px 5px;
}
.双线边框::before { content: '\2E28'; font-size: 0.8em; color: #b8860b; margin-right: 2px; }
.双线边框::after  { content: '\2E29'; font-size: 0.8em; color: #b8860b; margin-left: 2px; }

.小型大写 {
  background: #dfc58a; color: #1a0800;
  font-variant: small-caps;
  border-radius: 2px; padding: 1px 4px;
}
.小型大写::before { content: '\00B7'; font-size: 1em; color: #8b6914; margin-right: 3px; }
.小型大写::after  { content: '\00B7'; font-size: 1em; color: #8b6914; margin-left: 3px; }

.上下细线 {
  background: #f0e2be; color: #3d2200;
  border-top: 1px solid #c9a84c;
  border-bottom: 1px solid #c9a84c;
  padding: 1px 4px;
}
.上下细线::before { content: '⌖'; font-size: 0.7em; color: #c9a84c; margin-right: 3px; }

.圆角徽章 {
  background: transparent; color: #8b6914;
  border: 1px solid #c9a84c;
  border-radius: 10px; padding: 1px 8px;
}
.圆角徽章::before { content: '✦'; font-size: 0.55em; color: #c9a84c; margin-right: 4px; vertical-align: middle; }
.圆角徽章::after  { content: '✦'; font-size: 0.55em; color: #c9a84c; margin-left: 4px; vertical-align: middle; }

/* ── B · 魔法咒语系 ── */

.荧光咒 {
  background: #e8e0f8; color: #2d1b4e;
  border-bottom: 2px solid #7b68ee;
  border-radius: 2px; padding: 1px 4px;
}
.荧光咒::before { content: '⊹'; font-size: 0.7em; color: #7b68ee; margin-right: 3px; }

.守护神咒 {
  background: #d4c8f0; color: #1a0f3d;
  border-left: 3px solid #534ab7;
  border-radius: 0; padding: 1px 4px 1px 6px;
}
.守护神咒::after { content: '↯'; font-size: 0.7em; color: #534ab7; margin-left: 4px; }

.开锁咒 {
  background: transparent; color: #534ab7;
  text-shadow: 0 0 10px #7b68ee99;
  border-bottom: 1px solid #afa9ec;
  padding: 1px 4px;
  animation: hp-spell-pulse 3s ease-in-out infinite;
}
.开锁咒::before { content: '✵'; font-size: 0.7em; color: #7b68ee; margin-right: 3px; animation: hp-twinkle 1.5s ease-in-out infinite; }
.开锁咒::after  { content: '✵'; font-size: 0.7em; color: #7b68ee; margin-left: 3px; animation: hp-twinkle 1.5s ease-in-out infinite 0.5s; }

.黑暗咒 {
  background: #1a0f3d; color: #c8b8f0;
  border-radius: 3px; padding: 1px 5px;
  letter-spacing: 0.05em;
}
.黑暗咒::before { content: '⬡'; font-size: 0.55em; color: #7b68ee; margin-right: 4px; vertical-align: middle; }

.召唤咒 {
  background: #eee8ff; color: #3c3489;
  border: 1px solid #afa9ec;
  border-radius: 3px; font-style: italic; padding: 1px 5px;
}
.召唤咒::before { content: '\1D11E'; font-size: 0.9em; color: #afa9ec; margin-right: 3px; font-style: normal; }

.漂浮咒 {
  background: #c8b8f0; color: #26215c;
  font-variant: small-caps;
  border-radius: 2px; padding: 1px 4px;
}
.漂浮咒::before { content: '◇'; font-size: 0.6em; color: #534ab7; margin-right: 3px; }
.漂浮咒::after  { content: '◇'; font-size: 0.6em; color: #534ab7; margin-left: 3px; }

.滑稽咒 {
  background: transparent; color: #7f77dd;
  border-bottom: 2px double #7f77dd; padding: 1px 4px;
}
.滑稽咒::after { content: '\1A65'; font-size: 0.6em; color: #afa9ec; margin-left: 4px; vertical-align: super; }

.盾牌咒 {
  background: #f0ecff; color: #3c3489;
  border-top: 2px solid #7b68ee;
  border-bottom: 2px solid #7b68ee; padding: 1px 4px;
}
.盾牌咒::before { content: '\27E8'; font-size: 0.85em; color: #7b68ee; margin-right: 2px; }
.盾牌咒::after  { content: '\27E9'; font-size: 0.85em; color: #7b68ee; margin-left: 2px; }

.遗忘咒 {
  background: #2d1b4e; color: #eeedfe;
  border-left: 3px solid #afa9ec;
  border-radius: 0; padding: 1px 4px 1px 6px;
  animation: hp-flicker 4s step-end infinite;
}
.遗忘咒::after { content: '░'; font-size: 0.6em; color: #afa9ec55; margin-left: 4px; }

.石化咒 {
  background: #b8a8e8; color: #1a0f3d;
  border-radius: 10px; padding: 1px 8px;
}
.石化咒::before { content: '○'; font-size: 0.55em; color: #534ab7; margin-right: 4px; vertical-align: middle; }
.石化咒::after  { content: '○'; font-size: 0.55em; color: #534ab7; margin-left: 4px; vertical-align: middle; }

.修复咒 {
  background: transparent; color: #534ab7;
  border: 1px dashed #7f77dd;
  border-radius: 3px; padding: 1px 5px;
}
.修复咒::before { content: '⁕'; font-size: 0.7em; color: #7f77dd; margin-right: 3px; }

.沉默咒 {
  background: #e0d8ff; color: #26215c;
  border-right: 4px solid #534ab7;
  border-radius: 0; padding: 1px 7px 1px 4px;
}
.沉默咒::after { content: '⁂'; font-size: 0.65em; color: #534ab7; margin-left: 4px; vertical-align: super; }

/* ── C · 四大学院系 ── */

.格兰芬多淡 {
  background: #f5e0e0; color: #7b1c1c;
  border-bottom: 2px solid #7b1c1c;
  border-radius: 2px; padding: 1px 4px;
}
.格兰芬多淡::before { content: '♞'; font-size: 0.7em; color: #7b1c1c; margin-right: 3px; }

.格兰芬多深 {
  background: #7b1c1c; color: #f5d78e;
  border-radius: 2px; padding: 1px 5px;
  font-variant: small-caps;
}
.格兰芬多深::before { content: '❖'; font-size: 0.6em; color: #f5d78e99; margin-right: 4px; }
.格兰芬多深::after  { content: '❖'; font-size: 0.6em; color: #f5d78e99; margin-left: 4px; }

.格兰芬多侧 {
  background: #f9d58a; color: #7b1c1c;
  border-left: 3px solid #7b1c1c;
  border-radius: 0; padding: 1px 4px 1px 6px;
}
.格兰芬多侧::after { content: '†'; font-size: 0.75em; color: #7b1c1c; margin-left: 4px; vertical-align: super; opacity: 0.7; }

.斯莱特林淡 {
  background: #d8ede0; color: #0a3d20;
  border-bottom: 2px solid #1a6b3a;
  border-radius: 2px; padding: 1px 4px;
}
.斯莱特林淡::before { content: '\27C6'; font-size: 0.75em; color: #1a6b3a; margin-right: 3px; }

.斯莱特林深 {
  background: #0a3d20; color: #c8c8c8;
  border-radius: 2px; padding: 1px 5px;
  letter-spacing: 0.04em;
}
.斯莱特林深::before { content: '⌾'; font-size: 0.65em; color: #c8c8c866; margin-right: 4px; }

.斯莱特林斜 {
  background: #c0d8c8; color: #0a3d20;
  border: 1px solid #1a6b3a;
  border-radius: 3px; font-style: italic; padding: 1px 5px;
}
.斯莱特林斜::before { content: '\3009'; font-size: 0.75em; color: #1a6b3a; margin-right: 2px; font-style: normal; }
.斯莱特林斜::after  { content: '\3008'; font-size: 0.75em; color: #1a6b3a; margin-left: 2px; font-style: normal; }

.拉文克劳淡 {
  background: #e0e8f5; color: #0a2050;
  border-bottom: 2px solid #1a3a8a;
  border-radius: 2px; padding: 1px 4px;
}
.拉文克劳淡::before { content: '▲'; font-size: 0.5em; color: #1a3a8a; margin-right: 4px; vertical-align: middle; }

.拉文克劳深 {
  background: #1a3a8a; color: #c8a840;
  border-radius: 2px; padding: 1px 5px;
  font-variant: small-caps;
}
.拉文克劳深::before { content: '❈'; font-size: 0.65em; color: #c8a84099; margin-right: 4px; }
.拉文克劳深::after  { content: '❈'; font-size: 0.65em; color: #c8a84099; margin-left: 4px; }

.拉文克劳侧 {
  background: #b8c8e8; color: #0a2050;
  border-right: 4px solid #1a3a8a;
  border-radius: 0; padding: 1px 7px 1px 4px;
}
.拉文克劳侧::after { content: 'ω'; font-size: 0.65em; color: #1a3a8a; margin-left: 4px; font-style: italic; vertical-align: super; opacity: 0.75; }

.赫奇帕奇淡 {
  background: #fdf3d8; color: #3d2800;
  border-bottom: 2px solid #e0a800;
  border-radius: 2px; padding: 1px 4px;
}
.赫奇帕奇淡::before { content: '⬡'; font-size: 0.55em; color: #e0a800; margin-right: 3px; vertical-align: middle; }

.赫奇帕奇深 {
  background: #e0a800; color: #1a0f00;
  border-radius: 2px; padding: 1px 5px;
  font-variant: small-caps;
}
.赫奇帕奇深::before { content: '✿'; font-size: 0.65em; color: #1a0f0088; margin-right: 4px; }
.赫奇帕奇深::after  { content: '✿'; font-size: 0.65em; color: #1a0f0088; margin-left: 4px; }

.赫奇帕奇框 {
  background: #f5e4a0; color: #3d2800;
  border: 1px solid #e0a800;
  border-radius: 3px; padding: 1px 5px;
}
.赫奇帕奇框::before { content: '☙'; font-size: 0.75em; color: #e0a800; margin-right: 3px; }

.四院归一 {
  background: linear-gradient(90deg,#f5e0e0 0%,#f5e0e0 25%,#d8ede0 25%,#d8ede0 50%,#e0e8f5 50%,#e0e8f5 75%,#fdf3d8 75%);
  color: #1a1a1a; border-radius: 3px;
  font-variant: small-caps; padding: 1px 5px;
}
.四院归一::before { content: '✦'; font-size: 0.55em; color: #888; margin-right: 4px; }
.四院归一::after  { content: '✦'; font-size: 0.55em; color: #888; margin-left: 4px; }

/* ── D · 黑魔法禁忌系 ── */

.阿瓦达索命 {
  background: #1a0a0a; color: #cc2222;
  border-radius: 2px; padding: 1px 5px;
  letter-spacing: 0.05em;
}
.阿瓦达索命::before { content: '\2620'; font-size: 0.65em; color: #cc222277; margin-right: 4px; }

.钻心剜骨 {
  background: transparent; color: #cc2222;
  border-bottom: 2px solid #8b0000;
  text-shadow: 0 0 8px #cc222255; padding: 1px 4px;
}
.钻心剜骨::before { content: '⚡'; font-size: 0.65em; color: #cc2222; margin-right: 3px; }
.钻心剜骨::after  { content: '⚡'; font-size: 0.65em; color: #cc2222; margin-left: 3px; animation: hp-flicker 2.5s step-end infinite; }

.夺魂咒 {
  background: #0d1a0d; color: #2dcc2d;
  border-radius: 2px; padding: 1px 5px;
  font-variant: small-caps; letter-spacing: 0.06em;
  animation: hp-flicker 5s step-end infinite;
}
.夺魂咒::before { content: '⌬'; font-size: 0.65em; color: #2dcc2d88; margin-right: 4px; }

.黑魔标记 {
  background: #200a20; color: #cc44cc;
  border-left: 3px solid #8b008b;
  border-radius: 0; padding: 1px 4px 1px 6px;
}
.黑魔标记::after { content: '⁎'; font-size: 0.7em; color: #cc44cc88; margin-left: 4px; vertical-align: super; }

.被删除的记录 {
  background: transparent; color: #888;
  border-bottom: 1px solid #444;
  text-decoration: line-through;
  text-decoration-color: #cc2222; padding: 1px 4px;
}
.被删除的记录::before { content: '✗'; font-size: 0.7em; color: #cc222299; margin-right: 3px; }

.封印档案 {
  background: #111; color: #666;
  border: 1px solid #333;
  border-radius: 3px; font-style: italic;
  letter-spacing: 0.03em; padding: 1px 5px;
}
.封印档案::before { content: '⊘'; font-size: 0.65em; color: #555; margin-right: 3px; font-style: normal; }

.血色警告 {
  background: #2a0000; color: #ff6666;
  border-top: 1px solid #8b0000;
  border-bottom: 1px solid #8b0000; padding: 1px 4px;
}
.血色警告::before { content: '▸'; font-size: 0.7em; color: #8b0000; margin-right: 3px; }
.血色警告::after  { content: '◂'; font-size: 0.7em; color: #8b0000; margin-left: 3px; }

.魂器碎片 {
  background: #0a000a; color: #bb88ff;
  border-radius: 2px; padding: 1px 5px;
  text-shadow: 0 0 10px #bb88ff66;
  animation: hp-spell-pulse 4s ease-in-out infinite;
}
.魂器碎片::before { content: '◈'; font-size: 0.6em; color: #bb88ff88; margin-right: 4px; animation: hp-twinkle 2s ease-in-out infinite; }
.魂器碎片::after  { content: '◈'; font-size: 0.6em; color: #bb88ff88; margin-left: 4px; animation: hp-twinkle 2s ease-in-out infinite 1s; }

.禁林入口 {
  background: #001a00; color: #44ff44;
  border: 1px dashed #2dcc2d;
  border-radius: 3px; padding: 1px 5px;
  font-variant: small-caps;
}
.禁林入口::before { content: '▶'; font-size: 0.55em; color: #2dcc2d; margin-right: 4px; vertical-align: middle; }

.被抹去的名字 {
  background: transparent; color: #444;
  border: 1px solid #555;
  border-radius: 10px; padding: 1px 8px;
  text-decoration: line-through;
}
.被抹去的名字::before { content: '\2205'; font-size: 0.7em; color: #555; margin-right: 4px; }

.伏地魔印记 {
  background: #1a1a00; color: #cccc00;
  border-right: 4px solid #888800;
  border-radius: 0; letter-spacing: 0.04em;
  padding: 1px 7px 1px 4px;
}
.伏地魔印记::before { content: '⚔'; font-size: 0.6em; color: #cccc0099; margin-right: 4px; }

.食死徒密语 {
  background: #0a0a1a; color: #8888ff;
  border-bottom: 2px double #4444aa;
  font-style: italic; padding: 1px 4px;
}
.食死徒密语::before { content: '\22EF'; font-size: 0.75em; color: #4444aa; margin-right: 3px; font-style: normal; }
.食死徒密语::after  { content: '\22EF'; font-size: 0.75em; color: #4444aa; margin-left: 3px; font-style: normal; }

/* ── 动画关键帧 ── */

@keyframes hp-spell-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@keyframes hp-flicker {
  0%, 94%, 100% { opacity: 1; }
  95%, 98% { opacity: 0.25; }
}
@keyframes hp-twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

[nfc]

这个超好看，推荐下自制的插件，直接快捷插入标签（主要我搞不懂什么正则之类的，以及highlight插件，所以让deepseek写main.js

const { Plugin, PluginSettingTab, Setting } = require('obsidian');

// 默认标签示例（包含两种输出类型）
const DEFAULT_TAGS = [
  { id: '1', tag: '#green-wavy', outputType: 'tagHighlight' },
  { id: '2', tag: '#red-solid', outputType: 'tagHighlight' },
  { id: '3', tag: 'hp-parch-1', outputType: 'markClass' }
];

class DynamicHighlightPlugin extends Plugin {
  async onload() {
    await this.loadSettings();
    this.registerAllCommands();
    this.addSettingTab(new DynamicHighlightSettingTab(this.app, this));
  }

  async loadSettings() {
    const data = await this.loadData();
    this.settings = data || { tags: DEFAULT_TAGS };
    if (!this.settings.tags) this.settings.tags = [];
    // 确保每个标签有 id 和 outputType
    this.settings.tags.forEach((tag, idx) => {
      if (!tag.id) tag.id = Date.now() + '-' + idx;
      if (!tag.outputType) tag.outputType = 'tagHighlight'; // 默认
    });
  }

  async saveSettings() {
    await this.saveData(this.settings);
    this.registerAllCommands(); // 重新注册命令
  }

  clearAllCommands() {
    const commandIds = this.settings.tags.map(tag => `dynamic-highlight-${tag.id}`);
    commandIds.forEach(id => {
      const cmd = this.app.commands.findCommand(id);
      if (cmd) this.app.commands.removeCommand(id);
    });
  }

  registerAllCommands() {
    this.clearAllCommands();
    for (const tagItem of this.settings.tags) {
      const tag = tagItem.tag;
      const outputType = tagItem.outputType;
      this.addCommand({
        id: `dynamic-highlight-${tagItem.id}`,
        name: `高亮 (${tag})`,
        editorCallback: (editor) => {
          const selection = editor.getSelection();
          if (!selection) return;
          let replacement = '';
          if (outputType === 'tagHighlight') {
            // 输出格式： #tag ==选中文本==
            replacement = ` ${tag}==${selection}==`;
          } else {
            // 输出格式： <mark class="类名">选中文本</mark>
            let className = tag;
            if (className.startsWith('#')) className = className.slice(1);
            replacement = `<mark class="${className}">${selection}</mark>`;
          }
          editor.replaceSelection(replacement);
        },
      });
    }
  }

  addTag(tag, outputType = 'tagHighlight') {
    if (tag && !tag.startsWith('#') && outputType === 'tagHighlight') {
      tag = '#' + tag;
    }
    const newTag = { id: Date.now().toString(), tag: tag, outputType: outputType };
    this.settings.tags.push(newTag);
    this.saveSettings();
  }

  removeTag(id) {
    this.settings.tags = this.settings.tags.filter(t => t.id !== id);
    this.saveSettings();
  }

  updateTag(id, newTag, newOutputType) {
    const index = this.settings.tags.findIndex(t => t.id === id);
    if (index !== -1) {
      if (newTag && !newTag.startsWith('#') && newOutputType === 'tagHighlight') {
        newTag = '#' + newTag;
      }
      this.settings.tags[index].tag = newTag;
      if (newOutputType) this.settings.tags[index].outputType = newOutputType;
      this.saveSettings();
    }
  }

  onunload() {
    this.clearAllCommands();
  }
}

class DynamicHighlightSettingTab extends PluginSettingTab {
  constructor(app, plugin) {
    super(app, plugin);
    this.plugin = plugin;
  }

  display() {
    const { containerEl } = this;
    containerEl.empty();

    containerEl.createEl('h2', { text: '动态高亮 - 标签管理' });
    containerEl.createEl('p', { text: '每个标签生成一个独立命令。选择输出类型：“标签+高亮”用于彩色下划线CSS，“Mark类”用于哈利波特CSS。' });

    // 添加新标签区域
    let newTagValue = '';
    let newOutputType = 'tagHighlight';

    new Setting(containerEl)
      .setName('新增标签')
      .setDesc('输入标签内容（例如 #green-wavy 或 hp-parch-1）')
      .addText(text => {
        text.setPlaceholder('#green-wavy 或 hp-parch-1')
          .onChange(value => newTagValue = value);
      })
      .addDropdown(dropdown => {
        dropdown.addOption('tagHighlight', '标签+高亮 (#tag ==text==)')
          .addOption('markClass', 'Mark类 (<mark class="...">)')
          .setValue('tagHighlight')
          .onChange(value => newOutputType = value);
      })
      .addButton(btn => btn.setButtonText('添加')
        .onClick(() => {
          if (newTagValue && newTagValue.trim()) {
            this.plugin.addTag(newTagValue.trim(), newOutputType);
            this.display();
          }
        }));

    // 现有标签列表
    containerEl.createEl('h3', { text: '现有标签' });
    for (const tagItem of this.plugin.settings.tags) {
      const tagId = tagItem.id;
      let currentTag = tagItem.tag;
      let currentOutputType = tagItem.outputType;

      const setting = new Setting(containerEl)
        .setName(currentTag)
        .addText(text => {
          text.setValue(currentTag)
            .onChange(async (value) => {
              currentTag = value;
              this.plugin.updateTag(tagId, currentTag, currentOutputType);
              this.display();
            });
        })
        .addDropdown(dropdown => {
          dropdown.addOption('tagHighlight', '标签+高亮')
            .addOption('markClass', 'Mark类')
            .setValue(currentOutputType)
            .onChange(async (value) => {
              currentOutputType = value;
              this.plugin.updateTag(tagId, currentTag, currentOutputType);
              this.display();
            });
        })
        .addButton(btn => btn.setButtonText('删除')
          .setWarning()
          .onClick(() => {
            this.plugin.removeTag(tagId);
            this.display();
          }));
    }

    if (this.plugin.settings.tags.length === 0) {
      containerEl.createEl('div', { text: '暂无标签，请添加。' });
    }
  }
}

module.exports = DynamicHighlightPlugin;