欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

使用 rehype-katex 解决锚点跳转后渲染异常的 react-markdown - 解决方案

最编程 2024-09-30 07:50:04
...

经过初步排查,问题出在 katex/dist/katex.min.css 第 158 行起的部分:

.katex .katex-mathml {
  /* Accessibility hack to only show to screen readers
   Found at: http://a11yproject.com/posts/how-to-hide-content/ */
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

看注释意思大概是隐藏元素,但因为无障碍支持需要其保留在文档树中。此外,渲染出来的公式由2个部分组成,一个是类名为 katex-mathml,另一个为 katex-html。不考虑无障碍友好,隐藏一个,并保证另一个正常即可。
创建并引入一个新的 css 文件(overrides.css),用一些设置覆盖效果

span.katex {
  & span.katex-mathml {
    position: inherit;
  }

  & span.katex-html[aria-hidden="true"] {
    display: none;
  }
}

或者:

span.katex {
  & span.katex-mathml {
    display: none;
  }
}

这两种仅仅是字体上的区别。此时,锚点跳转后渲染正常,且数学公式也被正常渲染。
本文的解决方案仅供参考,不一定适用任何项目。

推荐阅读