[css] 自动标题编号

写在前面

本文中包含 1.X 和 2.X 两个版本，1.X 为无背景版，2.X 为有背景版，按需选择即可。

最终效果

2.0 版本效果：

缘由

最近经常使用思源做笔记，但是思源笔记导出成 pdf 后，用黑白打印机打印出来后，各级标题十分难以区分，所以就萌生了利用 css 将标题自动编号的想法，后面在论坛里面找到了 @ABin666 的这个链接，但是在我的电脑上无法使用，于是便自己修改了一下，【自动标题编号 v1.0】版本就此诞生。

1.X 版本

/* ================= 标题自动编号模块 v1.0 ================= */
body {
    counter-reset: h1-count;
}

h1,
.h1 {
    counter-increment: h1-count;
    counter-reset: h2-count;
}

h2,
.h2 {
    counter-increment: h2-count;
    counter-reset: h3-count;
}

h3,
.h3 {
    counter-increment: h3-count;
    counter-reset: h4-count;
}

h4,
.h4 {
    counter-increment: h4-count;
    counter-reset: h5-count;
}

h5,
.h5 {
    counter-increment: h5-count;
    counter-reset: h6-count;
}

/* 通用计数器样式 */
.protyle-wysiwyg [data-node-id][class^="h"] div:first-child:before,
.b3-typography h1:before,
.b3-typography h2:before,
.b3-typography h3:before,
.b3-typography h4:before,
.b3-typography h5:before,
.b3-typography h6:before {
    display: inline-block !important;
    float: none;
    margin-right: 8px;
    font-size: 100%;
    opacity: 1 !important;
    /* 强制显示防止折叠隐藏 */
}



/* ================== 无上级标题时编号优化 ================== */
.b3-typography h2:not(:has(~ h1)):before {
    content: counter(h2-count) "\00A0";
}

.b3-typography h3:not(:has(~ h1, ~ h2)):before {
    content: counter(h3-count) "\00A0";
}

.b3-typography h4:not(:has(~ h1, ~ h2, ~ h3)):before {
    content: counter(h4-count) "\00A0";
}

.b3-typography h5:not(:has(~ h1, ~ h2, ~ h3, ~ h4)):before {
    content: counter(h5-count) "\00A0";
}

.b3-typography h6:not(:has(~ h1, ~ h2, ~ h3, ~ h4, ~ h5)):before {
    content: counter(h6-count) "\00A0";
}

.b3-typography h3:not(:has(~ h1)):before {
    content: counter(h2-count) "." counter(h3-count) "\00A0";
}

.b3-typography h4:not(:has(~ h1, ~ h2)):before {
    content: counter(h3-count) "." counter(h4-count) "\00A0";
}

.b3-typography h5:not(:has(~ h1, ~ h2, ~ h3)):before {
    content: counter(h4-count) "." counter(h5-count) "\00A0";
}

.b3-typography h6:not(:has(~ h1, ~ h2, ~ h3, ~ h4)):before {
    content: counter(h5-count) "." counter(h6-count) "\00A0";
}


/* 层级式编号生成规则 */
.protyle-wysiwyg [data-node-id].h1 div:first-child:before,
.b3-typography h1:before {
    content: counter(h1-count) "\00A0";
}

.protyle-wysiwyg [data-node-id].h2 div:first-child:before,
.b3-typography h2:before {
    content: counter(h1-count) "." counter(h2-count) "\00A0";
}

.protyle-wysiwyg [data-node-id].h3 div:first-child:before,
.b3-typography h3:before {
    content: counter(h1-count) "." counter(h2-count) "." counter(h3-count) "\00A0";
}

.protyle-wysiwyg [data-node-id].h4 div:first-child:before,
.b3-typography h4:before {
    content: counter(h1-count) "." counter(h2-count) "." counter(h3-count) "." counter(h4-count) "\00A0";
}

.protyle-wysiwyg [data-node-id].h5 div:first-child:before,
.b3-typography h5:before {
    content: counter(h1-count) "." counter(h2-count) "." counter(h3-count) "." counter(h4-count) "." counter(h5-count) "\00A0";
    font-size: 90% !important;
}

.protyle-wysiwyg [data-node-id].h6 div:first-child:before,
.b3-typography h6:before {
    content: counter(h1-count) "." counter(h2-count) "." counter(h3-count) "." counter(h4-count) "." counter(h5-count) "." counter(h6-count) "\00A0";
    font-size: 85% !important;
}

/* ================= 标题视觉标识模块 ================= */
/* 标题颜色分级系统 */
[data-type="NodeHeading"].h1 {
    color: #d40045 !important;
}

[data-type="NodeHeading"].h2 {
    color: #ff7f00 !important;
}

[data-type="NodeHeading"].h3 {
    color: #66b82b !important;
}

[data-type="NodeHeading"].h4 {
    color: #093f86 !important;
}

[data-type="NodeHeading"].h5 {
    color: #340c81 !important;
}


/* ================= 折叠状态适配模块 ================= */
.protyle-wysiwyg [data-fold="1"] [data-node-id][class^="h"] {
    position: relative;
    padding-right: 4em !important;
    /* 为折叠标记留出空间 */
}

2.X 版本

今天突然看到了 QYL 主题的边框文档树的效果：

于是起了更新下代码的想法，好在过程十分顺利，就此【自动标题编号 v2.X】正式诞生啦 🎉

代码如下：

/* ================= 标题自动编号模块 v2.2 ================= */

/* CSS 变量定义 */
:root {
    --h1-color: #d40045;
    --h2-color: #ff7f00;
    --h3-color: #66b82b;
    --h4-color: #093f86;
    --h5-color: #340c81;
    --h6-color: #666666;

    --h1-bg: rgba(212, 0, 69, 0.1);
    --h2-bg: rgba(255, 127, 0, 0.1);
    --h3-bg: rgba(102, 184, 43, 0.1);
    --h4-bg: rgba(9, 63, 134, 0.1);
    --h5-bg: rgba(52, 12, 129, 0.1);
    --h6-bg: rgba(102, 102, 102, 0.08);
}

/* ================= 计数器配置 ================= */
body {
    counter-reset: h1-count;
}

/* 简化计数器重置选择器 */
.protyle-wysiwyg [data-node-id].h1,
.b3-typography h1 {
    counter-increment: h1-count;
    counter-reset: h2-count;
}

.protyle-wysiwyg [data-node-id].h2,
.b3-typography h2 {
    counter-increment: h2-count;
    counter-reset: h3-count;
}

.protyle-wysiwyg [data-node-id].h3,
.b3-typography h3 {
    counter-increment: h3-count;
    counter-reset: h4-count;
}

.protyle-wysiwyg [data-node-id].h4,
.b3-typography h4 {
    counter-increment: h4-count;
    counter-reset: h5-count;
}

.protyle-wysiwyg [data-node-id].h5,
.b3-typography h5 {
    counter-increment: h5-count;
    counter-reset: h6-count;
}

.protyle-wysiwyg [data-node-id].h6,
.b3-typography h6 {
    counter-increment: h6-count;
}

/* ================= 编号显示样式 ================= */
/* 通用编号样式基础 */
.protyle-wysiwyg [data-node-id][class^="h"] div:first-child:before,
.b3-typography h1:before,
.b3-typography h2:before,
.b3-typography h3:before,
.b3-typography h4:before,
.b3-typography h5:before,
.b3-typography h6:before {
    display: inline-block;
    margin-right: 8px;
    font-weight: 600;
    opacity: 0.85;
    user-select: none;
}

/* 层级编号内容 */
.protyle-wysiwyg [data-node-id].h1 div:first-child:before,
.b3-typography h1:before {
    content: counter(h1-count) "\00A0";
    font-size: 1em;
}

.protyle-wysiwyg [data-node-id].h2 div:first-child:before,
.b3-typography h2:before {
    content: counter(h1-count) "." counter(h2-count) "\00A0";
    font-size: 0.95em;
}

.protyle-wysiwyg [data-node-id].h3 div:first-child:before,
.b3-typography h3:before {
    content: counter(h1-count) "." counter(h2-count) "." counter(h3-count) "\00A0";
    font-size: 0.9em;
}

.protyle-wysiwyg [data-node-id].h4 div:first-child:before,
.b3-typography h4:before {
    content: counter(h1-count) "." counter(h2-count) "." counter(h3-count) "." counter(h4-count) "\00A0";
    font-size: 0.88em;
}

.protyle-wysiwyg [data-node-id].h5 div:first-child:before,
.b3-typography h5:before {
    content: counter(h1-count) "." counter(h2-count) "." counter(h3-count) "." counter(h4-count) "." counter(h5-count) "\00A0";
    font-size: 0.85em;
}

.protyle-wysiwyg [data-node-id].h6 div:first-child:before,
.b3-typography h6:before {
    content: counter(h1-count) "." counter(h2-count) "." counter(h3-count) "." counter(h4-count) "." counter(h5-count) "." counter(h6-count) "\00A0";
    font-size: 0.8em;
}

/* ================= 标题视觉样式 ================= */
/* 编辑器模式颜色映射 - 提高选择器优先级 */
.protyle-wysiwyg [data-type="NodeHeading"].h1,
.protyle-wysiwyg [data-node-id].h1 {
    color: var(--h1-color) !important;
    background-color: var(--h1-bg);
}

.protyle-wysiwyg [data-type="NodeHeading"].h2,
.protyle-wysiwyg [data-node-id].h2 {
    color: var(--h2-color) !important;
    background-color: var(--h2-bg);
}

.protyle-wysiwyg [data-type="NodeHeading"].h3,
.protyle-wysiwyg [data-node-id].h3 {
    color: var(--h3-color) !important;
    background-color: var(--h3-bg);
}

.protyle-wysiwyg [data-type="NodeHeading"].h4,
.protyle-wysiwyg [data-node-id].h4 {
    color: var(--h4-color) !important;
    background-color: var(--h4-bg);
}

.protyle-wysiwyg [data-type="NodeHeading"].h5,
.protyle-wysiwyg [data-node-id].h5 {
    color: var(--h5-color) !important;
    background-color: var(--h5-bg);
}

.protyle-wysiwyg [data-type="NodeHeading"].h6,
.protyle-wysiwyg [data-node-id].h6 {
    color: var(--h6-color) !important;
    background-color: var(--h6-bg);
}

/* 通用标题基础样式 */
.protyle-wysiwyg [data-type="NodeHeading"],
.b3-typography h1,
.b3-typography h2,
.b3-typography h3,
.b3-typography h4,
.b3-typography h5,
.b3-typography h6 {
    border-radius: 4px;
    padding: 6px 8px;
    margin: 8px 0;
    transition: background-color 0.2s ease;
}

/* 预览模式分级样式 */
.b3-typography h1 {
    color: var(--h1-color) !important;
    background-color: var(--h1-bg);
    padding: 8px 12px;
    margin: 16px 0;
    border-left: 4px solid var(--h1-color);
}

.b3-typography h2 {
    color: var(--h2-color) !important;
    background-color: var(--h2-bg);
    padding: 6px 10px;
    margin: 14px 0;
    border-left: 3px solid var(--h2-color);
}

.b3-typography h3 {
    color: var(--h3-color) !important;
    background-color: var(--h3-bg);
    padding: 5px 8px;
    margin: 12px 0;
    border-left: 2px solid var(--h3-color);
}

.b3-typography h4 {
    color: var(--h4-color) !important;
    background-color: var(--h4-bg);
    padding: 4px 6px;
    margin: 10px 0;
}

.b3-typography h5 {
    color: var(--h5-color) !important;
    background-color: var(--h5-bg);
    padding: 3px 5px;
    margin: 8px 0;
}

.b3-typography h6 {
    color: var(--h6-color) !important;
    background-color: var(--h6-bg);
    padding: 2px 4px;
    margin: 6px 0;
}

/* ================= 编辑器内标题文本颜色强制设置 ================= */
/* 针对编辑器内标题内容的颜色设置 */
.protyle-wysiwyg [data-node-id].h1 div,
.protyle-wysiwyg [data-type="NodeHeading"].h1 div {
    color: var(--h1-color) !important;
}

.protyle-wysiwyg [data-node-id].h2 div,
.protyle-wysiwyg [data-type="NodeHeading"].h2 div {
    color: var(--h2-color) !important;
}

.protyle-wysiwyg [data-node-id].h3 div,
.protyle-wysiwyg [data-type="NodeHeading"].h3 div {
    color: var(--h3-color) !important;
}

.protyle-wysiwyg [data-node-id].h4 div,
.protyle-wysiwyg [data-type="NodeHeading"].h4 div {
    color: var(--h4-color) !important;
}

.protyle-wysiwyg [data-node-id].h5 div,
.protyle-wysiwyg [data-type="NodeHeading"].h5 div {
    color: var(--h5-color) !important;
}

.protyle-wysiwyg [data-node-id].h6 div,
.protyle-wysiwyg [data-type="NodeHeading"].h6 div {
    color: var(--h6-color) !important;
}