如何通过CSS为react-json-pretty组件添加行号显示？

要实现行号效果，核心是利用CSS计数器结合react-json-pretty暴露的类选择器定位每行元素，以下是可行方案：

步骤1：确认目标DOM类名 #

react-json-pretty渲染后，每个JSON行对应的元素会带有json-pretty-row类（可通过浏览器开发者工具直接查看DOM结构确认），我们以此类作为计数目标。

步骤2：编写CSS样式 #

在全局样式文件或组件专属样式中添加以下代码：

/* 在最外层容器初始化计数器 */
.json-pretty {
  counter-reset: json-line;
  padding-left: 3em; /* 为行号预留左侧空间 */
  position: relative;
}

/* 为每行元素递增计数器 */
.json-pretty-row {
  counter-increment: json-line;
  position: relative;
}

/* 通过伪元素生成行号 */
.json-pretty-row::before {
  content: counter(json-line);
  position: absolute;
  left: -2.5em; /* 定位到内容左侧 */
  color: #999; /* 用灰色区分行号与内容 */
  text-align: right;
  width: 2em; /* 固定宽度保证多行号对齐 */
  user-select: none; /* 禁止行号被选中 */
}

问题排查 #

• 若行号重复/不连续：检查是否存在嵌套的json-pretty-row元素导致计数器重复递增，可将选择器调整为.json-pretty > .json-pretty-row，限定仅对顶级行计数。
• 样式冲突：如果项目全局样式影响行元素，给选择器增加权重（比如加上组件类名前缀）。
• 行号与内容重叠：微调.json-pretty的padding-left和伪元素的left值，预留足够间距。

添加样式后刷新页面，即可看到每行左侧显示递增行号，与目标效果一致。

内容的提问来源于stack exchange，提问作者Mathis Legrand