孟菲斯风格标题及高亮样式

nilmarko · 2026 年4 月 5 日 00:27

/* 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;
  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;
}

我考系解 · 2026 年4 月 5 日 07:16

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

nilmarko · 2026 年4 月 5 日 08:20

修改了一下再试试看

Stargazer · 2026 年4 月 5 日 13:22

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

nilmarko · 2026 年4 月 5 日 14:06

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

Stargazer · 2026 年4 月 5 日 14:29

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

nilmarko · 2026 年4 月 5 日 23:57

孟菲斯风格高亮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 · 2026 年4 月 6 日 01:40

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

nilmarko · 2026 年4 月 6 日 13:08

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

熊猫别熬夜 · 2026 年4 月 7 日 05:13

好像阅读模式下，标题会叠加在一起，应该是阅读模式下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;
}