[1.0船新版本 CSS 片段系列] 标题美化

经验分享
1

修改自之前的样式，精简了近1/2的代码量

86e0674aad1360730f1ded0f910bfcddbc2816f2.gif (388×366) (obsidian.md)

详细介绍和片段在 flowus

  • 语雀免费版马上不让分享了，之前的片段链接已更新
4 个赞
2

您好，用来你的代码很精巧，很喜欢。然后现在是我想保持阅读模式标题原来的行高，要怎么改回去呢？

image
image776×648 13.3 KB

image
image802×554 13.7 KB

3

想将这两个功能单独拎出来

  1. 添加左侧 hover 图标，显示当前标题等级
  2. 开启标题折叠时，点击图标即可折叠
4

image
image919×288 36.8 KB

5

图标和折叠的按钮是同一个位置的，分开的话个人觉得太丑了

6

有点奇怪，我在发这个问题的时候，已经删除掉了这部分信息，还是一样的

7

我也是这么认为。我是想，图标和折叠按钮在一个位置。然后标题的行高是默认的行高。
现在是图标和折叠按钮在一个位置，然后标题的行高是变窄了的。

8

删除72行、101-103行

9

非常感谢，你的这些css都很有意思很好用。让界面多了一丝灵动。体验感很好

11

旧帖存档，内容已合并。

1 个赞
12

这里的片段没有更新，在我的主题里折叠后的标识不会消失，而且还会加上下划线

另外我个人认为还是用currentColor比较合适，这样可以用变量控制颜色

1 个赞
13

感谢分享，原来是通过指定 div.is-collapsed 下元素的伪元素的 opacity 来使折叠保持标识显示。
我 11 楼示例的思路是把三角折叠按钮的显示直接替换成别的，直接用折叠按钮的空间，这样不需要额外将伪元素的位置和折叠按钮有交互的区域对齐。如果能解决标识位置的问题，写起来就很简便了。

按照大佬的思路修简，11 楼样式另一种写法的 CSS 如下：

CSS 代码，点击展开 
/*使用此 CSS 宜按照 Markdown 语言推荐写法，标题前后各空一行*/
body {
  --line-height-normal: 1.52; /*行间距*/
  --heading-spacing: calc(var(--p-spacing) * 1.2); /*阅读模式标题间距，星号后面的数字是倍数可以自己调*/
}
.cm-s-obsidian .cm-line.HyperMD-header {padding-block: 0; /*编辑模式标题间距*/}

/*折叠按钮交互*/
.collapse-indicator {--cursor: pointer; /*显示小手*/}
.HyperMD-codeblock .collapse-indicator /*代码块折叠三角*/ {right: var(--size-4-1) !important; padding-right: 0 !important;}

/*小标题折叠按钮*/
:is(h1, h2, h3, h4, h5, h6, .HyperMD-header) {
  position: relative;
  &::before {
    content: '';
    position: absolute;
    font-weight: bold; /*加粗*/
    font-size: 0.7rem; /*字号*/
    top: 50%;
    transform: translateY(-50%);
    left: calc(-1 * var(--size-4-4)); /*与文本间距*/
  }
  &:not(:hover)::before {
    opacity: 0; /*平时隐藏，悬停显示*/
    transition: var(--anim-duration-superfast); /*过渡动画时间*/
  }
  & .collapse-indicator {
    width: var(--size-4-5); /*小标题点不到按钮改大这个*/
    & > svg {opacity: 0;} /*隐藏小标题折叠三角*/
  }
}
:is(div.is-collapsed > :is(h1, h2, h3, h4, h5, h6), .HyperMD-header:has(> .cm-foldPlaceholder))::before {
  opacity: 1; /*折叠保持标识显示*/
  text-decoration: underline 0.1rem; /*下划线*/
}

/*各级小标题折叠按钮文本及颜色*/
:is(h6, .HyperMD-header-6)::before {content: "h6"; color: hsl(258, 88%, 66%);}
:is(h5, .HyperMD-header-5)::before {content: "h5"; color: hsl(218, 100%, 55%);}
:is(h4, .HyperMD-header-4)::before {content: "h4"; color: hsl(194, 100%, 45%);}
:is(h3, .HyperMD-header-3)::before {content: "h3"; color: hsl(46, 100%, 45%);}
:is(h2, .HyperMD-header-2)::before {content: "h2"; color: hsl(23, 100%, 45%);}

默认主题代码块折叠三角总是跳动，也定义了一个样式，如果有冲突把那行删除即可。

因为 Markdown 语言提倡一篇文档只有一个 h1，所以没写 h1 的样式，如有需要，“各级小标题折叠按钮文本及颜色”下复制一行，所有的 2 改为 1 ，再换一个你想要的 color 即可。

再次感谢大佬！

2 个赞
15

请问大佬能否实现在点击标题的时候，#字不跳出，字体不会动，就像typora一样的标题编辑体验，然后点击标题等级的时候才会显示#字，折叠则是像blue主题里面的思路，有一个折叠图标，点击打开折叠，本人能力有限折腾好久没实现，希望大佬能够实现一下或者提供思路，感激不尽

16

隐藏：

.cm-formatting-header { display: none }

图标的话这里面就有

1 个赞
18

好的，太感谢了，我试试

19

好嘞，感谢各位大佬的回复

20

这样用快捷键设置标题、设置标签都会有问题，文字会显示在 ”#“ 前面

21

点击标题的时候，# 字不跳出，字体不会动

@subframe7536 @简悟 看看这样行吗。测试能折叠、能划选，虚线是行号位置，效果：

image → image

代码：

.cm-formatting-header /*#号*/ {position: absolute; transform: translateX(-100%);}
.cm-formatting-header.cm-header-2 {margin-left: 1px;}
22

可以了，感谢 :grinning: