remark-toc 项目常见问题解决方案-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01093/article/details/144879806

remark-toc 项目常见问题解决方案

remark-toc plugin to generate a table of contents (TOC) 项目地址: https://gitcode.com/gh_mirrors/re/remark-toc

remark-toc 是一个基于 Markdown 的开源项目，主要用于生成文档的目录。该项目使用 JavaScript 编程语言开发。

新手在使用这个项目时需要特别注意的3个问题及解决步骤

问题1：无法安装 remark-toc

问题描述：尝试使用 npm 安装 remark-toc 时遇到问题。

解决步骤：

确保您的 Node.js 环境版本为 16 或以上，因为 remark-toc 是 ESM (ECMAScript Modules) only。
使用命令 npm install remark-toc 进行安装。
如果安装失败，尝试清除 npm 缓存并重新安装：npm cache clean --force，然后再次运行安装命令。

问题2：在 Markdown 文件中无法生成目录

问题描述：在 Markdown 文件中添加了 ## Contents 标题，但目录没有生成。

解决步骤：

确保已经正确安装了 remark-toc。

在使用 remark 处理 Markdown 文件时，确保已经正确引入了 remark-toc 插件。代码示例如下：

const remark = require('remark');
const remarkToc = require('remark-toc');

remark()
  .use(remarkToc)
  .process('# My Document\n\n## Contents\n\nThis is my document content...', (err, file) => {
    if (err) throw err;
    console.log(String(file));
  });

检查是否在 Markdown 文件中正确放置了 ## Contents 标题，确保它位于文档的开始位置。

问题3：生成的目录链接无法正确跳转到标题

问题描述：目录中的链接点击后无法跳转到对应的标题。

解决步骤：

确保在处理 Markdown 文件时同时使用了 remark-rehype 插件，以及 rehype-slug 和 rehype-autolink-headings 插件来为标题添加 ID 和锚点。

修改 remark 处理流程，添加以下插件：

const remark = require('remark');
const remarkToc = require('remark-toc');
const remarkRehype = require('remark-rehype');
const rehypeSlug = require('rehype-slug');
const rehypeAutolinkHeadings = require('rehype-autolink-headings');

remark()
  .use(remarkToc)
  .use(remarkRehype)
  .use(rehypeSlug)
  .use(rehypeAutolinkHeadings)
  .process('# My Document\n\n## Contents\n\nThis is my document content...', (err, file) => {
    if (err) throw err;
    console.log(String(file));
  });