CSS 为 Markdown 添加标题

背景

大模型分步骤生成多段报告，最后合成一个富文本，后面的文本不知道前一段文本是什么标号，所以无法给出标题号，但是站在用户视角，不展示标题号又不直观，所以在渲染的时候要加标题号。

刚开始以为要用 react-markdown 库，识别文本内容是不是h1～h6标题，然后去手动添加标题号，后来发现展示的时候，可以通过 CSS 样式添加标题号，这样原始内容就不需要写死标题号，而是根据内容自动调整标题号。

核心代码

• counter-reset：初始化计数器 MDN-counter-reset
• counter-increment：递增计数器 MDN-counter-increment
• counter()：显示值 MDN-counter()

富文本案例

import ReactMarkdown from "react-markdown";
import styles from "./index.module.less";

const markdownContent = `# 引言
## 背景
### 历史回顾
#### 早期研究
##### 关键人物
###### 爱因斯坦的贡献
###### 牛顿的经典理论
##### 现代发展
#### 当前挑战
### 研究意义
## 目标
### 具体目标
#### 子目标 A
##### 细节 A1
###### 最终层级示例

# 方法
## 实验设计
#### 实验设计四级标题
### 数据采集
#### 传感器配置
##### 采样频率
###### 100Hz 设置

# 引言
## 背景
### 补充说明
#### 额外信息
##### 子项
###### 六级示例`;

const CounterResetCom = () => {
  return (
    <div className={styles.markdownContent}>
      <ReactMarkdown>{markdownContent}</ReactMarkdown>
    </div>
  );
};

export default CounterResetCom;

使用 counter-reset：重置计数器

counter-increment：累加

counter()：取值

.markdownContent {
  counter-reset: h1-counter;
}

.markdownContent h1 {
  counter-reset: h2-counter h3-counter h4-counter h5-counter h6-counter;
}
.markdownContent h1::before {
  counter-increment: h1-counter;
  content: counter(h1-counter) '. ';
  margin-right: 8px;
}

.markdownContent h2 {
  counter-reset: h3-counter h4-counter h5-counter h6-counter;
}
.markdownContent h2::before {
  counter-increment: h2-counter;
  content: counter(h1-counter) '.' counter(h2-counter) ' ';
  margin-right: 8px;
}

.markdownContent h3 {
  counter-reset: h4-counter h5-counter h6-counter;
}
.markdownContent h3::before {
  counter-increment: h3-counter;
  content: counter(h1-counter) '.' counter(h2-counter) '.' counter(h3-counter)
    ' ';
  margin-right: 8px;
}

.markdownContent h4 {
  counter-reset: h5-counter h6-counter;
}
.markdownContent h4::before {
  counter-increment: h4-counter;
  content: counter(h1-counter) '.' counter(h2-counter) '.' counter(h3-counter)
    '.' counter(h4-counter) ' ';
  margin-right: 8px;
}

.markdownContent h5 {
  counter-reset: h6-counter;
}
.markdownContent h5::before {
  counter-increment: h5-counter;
  content: counter(h1-counter) '.' counter(h2-counter) '.' counter(h3-counter)
    '.' counter(h4-counter) '.' counter(h5-counter) ' ';
  margin-right: 8px;
}

.markdownContent h6::before {
  counter-increment: h6-counter;
  content: counter(h1-counter) '.' counter(h2-counter) '.' counter(h3-counter)
    '.' counter(h4-counter) '.' counter(h5-counter) '.' counter(h6-counter) ' ';
  margin-right: 8px;
}

标签案例

import ReactMarkdown from "react-markdown";
import styles from "./index.module.less";

const CounterResetCom = () => {
  return (
    <div className={styles.markdownContent}>
      {/* 第一章 */}
      <h1>引言</h1>
      <h2>背景</h2>
      <h3>历史回顾</h3>
      <h4>早期研究</h4>
      <h5>关键人物</h5>
      <h6>爱因斯坦的贡献</h6>
      <h6>牛顿的经典理论</h6>
      <h5>现代发展</h5>
      <h4>当前挑战</h4>
      <h3>研究意义</h3>
      <h2>目标</h2>
      <h3>具体目标</h3>
      <h4>子目标 A</h4>
      <h5>细节 A1</h5>
      <h6>最终层级示例</h6>

      {/* 第二章 */}
      <h1>方法</h1>
      <h2>实验设计</h2>
      <h4>实验设计四级标题</h4>
      <h3>数据采集</h3>
      <h4>传感器配置</h4>
      <h5>采样频率</h5>
      <h6>100Hz 设置</h6>

      {/* 第三章（再次使用“引言”，但编号继续递增） */}
      <h1>引言</h1>
      <h2>背景</h2>
      <h3>补充说明</h3>
      <h4>额外信息</h4>
      <h5>子项</h5>
      <h6>六级示例</h6>
    </div>
  );
};

export default CounterResetCom;

踩过的坑

• 把所有标题都重置了，出现了现实不正常的情况

.markdownContent {
  counter-reset: h1-counter h2-counter h3-counter h4-counter h5-counter
    h6-counter;
}

CSS 为 Markdown 添加标题