Rehype-Pretty-Code行高亮功能失效问题求助

• 检查配置是否启用行高亮
  确认rehype-pretty-code配置中正确处理了高亮行，比如通过钩子添加属性或类：

  import rehypePrettyCode from "rehype-pretty-code";
  
  const rehypeConfig = {
    onVisitLine(node) {
      if (node.children.length === 0) {
        node.children = [{ type: "text", value: " " }];
      }
    },
    onVisitHighlightedLine(node) {
      node.properties["data-highlighted-line"] = "";
      // 也可添加自定义类配合样式
      node.properties.className?.push("highlighted-line");
    }
  };
  

• 修正代码块的高亮语法
  你当前代码块的标记```js {1-3, 4}中，逗号后有空格，部分解析器无法识别，改成```js {1-3,4}（去掉逗号后的空格）。

• 添加对应CSS样式
  仅添加data-highlighted-line属性不会自动显示高亮，需要补充样式：

  [data-highlighted-line] {
    background-color: rgba(100, 116, 139, 0.2);
    border-left: 3px solid #3b82f6;
    padding-inline-start: 0.5rem;
  }
  

• 更新依赖版本
  旧版本可能存在解析bug，执行命令更新到最新版：

  npm update rehype-pretty-code
  

内容的提问来源于stack exchange，提问作者Choi Chan Hwan