vue markdown文件自动生成目录

markdown-it-toc-done-right

sample

import markdownItAnchor from "markdown-it-anchor";
import markdownItTocDoneRight from "markdown-it-toc-done-right";
import "./index.css";
const md = require("markdown-it")({
  html: true,
  typographer: true
})
  .use(markdownItAnchor, {
    permalink: true,
    permalinkSymbol: ""
  })
  .use(markdownItTocDoneRight, {
    level: [2],
    containerClass: "tdesign-toc_container",
    listClass: "tdesign-toc_list",
    itemClass: "tdesign-toc_list_item",
    linkClass: "tdesign-toc_list_item_a",
    listType: "ul"
    // format: (x, htmlencode) => {
    //   console.log(x, htmlencode);
    //   return `<span>${htmlencode(x)}</span>`;
    // },
    // callback: (res) => {
    //   console.log(res);
    // }
  });

var result = md.render(
  "# markdown-it rulezz!\n\n${toc}\n## 23234234 markdown-it-toc-done-right rulezz even more! \n## susdhfashfishfiashiahf\nushfasfhfhsufhasf\nuuuuuuuuuuuuuu\nsufhsuhfsfhusf\n## with markdown-it-toc-done-right rulezz even more!"
);
document.getElementById("root").innerHTML = result;
const contanier = document.getElementsByClassName("tdesign-toc_container")[0];
var a = document.querySelectorAll(".tdesign-toc_list_item_a");
a[0].classList.add("actived");
contanier.addEventListener("click", (event) => {
  if (event.target.nodeName === "A") {
    a.forEach(function (aItem) {
      aItem.classList.remove("actived");
    });
    event.target.classList.add("actived");
  }
});

示例效果

markdown-it-toc

https://wenku.csdn.net/answer/e6089c2384c64c58aedfcdb524e6fd59

webpack 打包，就如下：

强调： 每次修改配置，都要重新打包才能生效。

vue.config.js 中

chainWebpack(config) {
    config.module
      .rule('md')
      .test(/\.md$/)
      .include.add(path.resolve(__dirname, './xxx.md'))
      .add(path.resolve(__dirname, './xxx.md'))
      .end()
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('md-loader')
      .loader(
        path.resolve(__dirname, './md-loader-index.js')
      )

md-loader-index.js

const tocPlugin = require('markdown-it-toc')
const markdown = require('markdown-it')
......
let md = markdown().use(tocPlugin)
......

md文档中

@[toc](目录)