记一次使用vue-markdown在vue中解析markdown格式文件，并自动生成目录大纲

先上效果图

如图所示，在网页中，能直接解析markdown文档，并且生成目录大纲，也支持点击目录标题跳转到对应栏目中，下面就来讲讲是如何实现此功能的。

1、下载vue-markdown

yarn add vue-markdown

2、在页面中渲染markdown文件


<template>
     <div>
        <VueMarkdown
            class="api-content"
            :source="markdownContent"
            id="content"
        />
    div>
template>
 
<script>
import VueMarkdown from "vue-markdown";
 
export default {
    components: {
        VueMarkdown,
    },
    data() {
        return {
            markdownContent: "",
         };
    },
    mounted() {
        this.loadMarkdownFile();
    },
    methods: {
        async loadMarkdownFile() {
            try {
                // api.md文件存放在根目录下的public文件夹中
                const response = await fetch("/api.md");
                const markdownText = await response.text();
                this.markdownContent = markdownText;
 
            } catch (error) {
                console.error("Failed to load the Markdown file:", error);
            }
        }, 
    },
};
script>

此时，打开浏览器查看，页面中已经正常渲染markdown文件了。

3、生成目录大纲

现在，我们需要有目录大纲方便我们查看文档。我的思路是，首先拿到markdown文件的html结构，然后找到所有H1-H5的标题标签，并给这些标签设置id，生成一个新数组，通过这个数组生成目录结构，说干就干。


//html部分
 
class="api-tree" id="tree">
    <el-tree
        :data="tree"
        :default-expand-all="true"
        @node-click="handleNodeClick"
    >el-tree>

// js部分
catalogTree() {
const content = document.getElementById("content").children;
var arr = [];
let currentHightestLevel;
let parentId;
let index = 0;
for (let i = 0; i < content.length; i++) {
let header = content[i].localName;
if (/\b[h][0-9]\b/.test(header)) {
let ele = $(content[i]);
let name = ele.text();
// 设置id
ele.attr("id", i);
let id = i;
if (index === 0 || header <= currentHightestLevel) {
currentHightestLevel = header;
parentId = id;
}
arr.push({
id: id,
label: name,
parentId: parentId == id ? "0" : parentId,
});
index++;
}
}
const tree = [];
arr.forEach((item) => {
if (item.parentId === "0") {
tree.push(this.convertArrayToTree(arr, item));
}
});
this.tree = tree;
},
convertArrayToTree(arr, node) {
for (let i = 0; i < arr.length; i++) {
if (arr[i].parentId === node.id) {
const res = this.convertArrayToTree(arr, arr[i]);
if (node.children) {
node.children.push(res);
} else {
node.children = [res];
}
}
}
return node;
},
handleNodeClick(data) {
let anchorElement = document.getElementById(data.id);
if (anchorElement) {
anchorElement.scrollIntoView({
behavior: "smooth",
block: "end",
});
}
},

4、大功告成，最后，附上全部代码，带css样式


<template>
    <div class="page-api" id="myElement">
        <div class="api-tree" id="tree">
            <el-tree
                :data="tree"
                :default-expand-all="true"
                @node-click="handleNodeClick"
            >el-tree>
        div>
        <VueMarkdown
            class="api-content"
            :source="markdownContent"
            id="content"
        />
    div>
template>
 
<script>
import VueMarkdown from "vue-markdown";
import $ from "jquery";
 
export default {
    components: {
        VueMarkdown,
    },
    data() {
        return {
            markdownContent: "",
            tree: [],
        };
    },
    mounted() {
        this.loadMarkdownFile();
    },
    methods: {
        async loadMarkdownFile() {
            try {
                const response = await fetch("/api.md");
                const markdownText = await response.text();
                this.markdownContent = markdownText;
                this.$nextTick(() => {
                    this.catalogTree();
                });
            } catch (error) {
                console.error("Failed to load the Markdown file:", error);
            }
        },
        catalogTree() {
            const content = document.getElementById("content").children;
            var arr = [];
            let currentHightestLevel;
            let parentId;
            let index = 0;
            for (let i = 0; i < content.length; i++) {
                let header = content[i].localName;
                if (/\b[h][0-9]\b/.test(header)) {
                    let ele = $(content[i]);
                    let name = ele.text();
                    // 设置id
                    ele.attr("id", i);
                    // let id = ele.children("a").attr("id");
                    let id = i;
                    if (index === 0 || header <= currentHightestLevel) {
                        currentHightestLevel = header;
                        parentId = id;
                    }
                    arr.push({
                        id: id,
                        label: name,
                        parentId: parentId == id ? "0" : parentId,
                    });
                    index++;
                }
            }
            const tree = [];
            arr.forEach((item) => {
                if (item.parentId === "0") {
                    tree.push(this.convertArrayToTree(arr, item));
                }
            });
            this.tree = tree;
        },
        convertArrayToTree(arr, node) {
            for (let i = 0; i < arr.length; i++) {
                if (arr[i].parentId === node.id) {
                    const res = this.convertArrayToTree(arr, arr[i]);
                    if (node.children) {
                        node.children.push(res);
                    } else {
                        node.children = [res];
                    }
                }
            }
            return node;
        },
        handleNodeClick(data) {
            let anchorElement = document.getElementById(data.id);
 
            let scrollPosition = anchorElement.offsetTop - 20;
 
            let myElement = document.getElementById("myElement");
            myElement.scrollTo({
                left: 0,
                top: scrollPosition,
                behavior: "smooth",
            });
 
            // if (anchorElement) {
            //     anchorElement.scrollIntoView({
            //         behavior: "smooth",
            //         block: "end",
            //     });
            // }
        },
    },
};
script>
 
<style lang="scss">
.page-api {
    display: flex;
    height: 100%;
    overflow-y: scroll;
    .api-tree {
        position: fixed;
        left: 20px;
        top: 120px;
        width: 200px;
        height: calc(100% - 160px);
        overflow-y: scroll;
        z-index: 99;
        .el-tree {
            background: none;
            color: #fff;
            .el-tree-node:focus > .el-tree-node__content,
            .el-tree-node__content:hover {
                background: none;
                color: rgb(24, 144, 255);
            }
        }
    }
    .api-content {
        flex: 1;
        margin-left: 220px;
        padding: 0 30px;
        color: rgba(255, 255, 255, 0.75);
 
        h3 {
            margin-left: 25px;
        }
        code {
            border-radius: 2px;
            color: #e96900;
            margin: 0 2px;
            padding: 3px 5px;
            white-space: pre-wrap;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
            th,
            td {
                border: 1px solid #ddd;
                padding: 6px 13px;
                margin: 0;
            }
        }
        pre {
            background: rgba(0, 0, 0, 0.7);
            padding: 20px 30px;
        }
    }
}
style>