如何解决"文章"与"目录"的滚动响应

• 文章数据类型：html
• 所用技术：react

第一步: 导入所需库

npm install markdown-navbar
npm install sitdown
npm install @sitdown/juejin

第二步: 引入文件

import { Sitdown } from 'sitdown';
import { applyJuejinRule } from '@sitdown/juejin';
import MarkNav from 'markdown-navbar';
import 'markdown-navbar/dist/navbar.css';

第三步: 使用sitdown将html转md

• 因为我的文章数据是爬取的，所以格式是html文本，但是如果要使用滚动响应的markdown-navbar必须要是markdown格式，所以使用sitdown进行转换(如果是markdown格式则不需要这一步)

// 将info.content(文章数据)转markdown格式
const sitdown = new Sitdown({
      keepFilter: ['style'],
      codeBlockStyle: 'fenced',
      bulletListMarker: '-',
      hr: '---',
});
sitdown.use(applyJuejinRule);
const content = info.content;
const markdText = sitdown.HTMLToMD(content);

html文本的显示可以直接使用dangerouslySetInnerHTML进行显示

<div className={styles.detailed_content}
      dangerouslySetInnerHTML={{ __html: info.content }}
>
</div>

第四步: 使用markdown-navbar实现响应

<MarkNav
      className="toc-list"
      source={markdText}
      headingTopOffset={80}
/>

高亮bug解决办法

markdown-navbar本身的库有问题，会出现页面高亮显示错误

• 附链接大佬的文章
• 附大佬的GitHub连接
• 将src目录下的index.js复制本地使用就好了