使用vue-markdown实现markdown文件预览

Vue-Markdown 是一个轻量级且高效的库，用于在Vue.js应用程序中渲染Markdown文本。它允许开发者以简洁的方式将Markdown的强大功能与Vue组件的灵活性相结合，提升开发效率和用户体验。vue-markdown 是一个基于 marked.js 的 Vue Markdown 插件。它是一个简单易用的 Markdown 解析器，可以方便地将 Markdown 文档解析为 HTML。它有如下特点：

功能强大：支持 Markdown 语法的全部特性，例如标题、列表、链接等。

易于使用：只需要在 Vue 组件中引入 vue-markdown 插件，并使用简单的模板语法即可实现 Markdown 的解析和渲染。

高性能：基于 marked.js，性能优异，可以快速地解析和渲染大量的 Markdown 文档。

扩展性强：支持自定义渲染规则，可以通过插件扩展功能，以满足更多的需求。

一、插件使用

1、插件说明

vue-markdown插件的灵活性较好，支持直接传递Markdown字符串，或者通过绑定数据属性来动态渲染Markdown。此外，还可以自定义渲染规则，扩展或替换特定的Markdown语法，以满足个性化需求。在github上看了作者的源码，发现该插件也引入了markdown-it，并且支持大部分的markdown-it的插件，通过插件的引入即可使用。

官方demo

1）slots

在组件中使用 vue-markdown 插件，可以在模板中添加 slots、props 和 events 的代码，如下：

2）配置参数

3）事件

vue-markdown 插件中，提供了以下两个事件：

2、安装

3、使用

二、页面中渲染并添加目录

在实际的项目开发过程中，为了方便定位与查阅，需要目录大纲，我们可以在旁边加上一个目录大纲，这里使用的el-tree进行目录的展示。

1、HTML部分

<template>
    <div class="page-api" id="myElement">
        <vue-markdown id="content" class="api-content" :source="markdownContent"></vue-markdown>
        <div class="api-tree" id="tree">
            <el-tree :data="tree" :default-expand-all="true" @node-click="handleNodeClick"></el-tree>
        </div>
    </div>
</template>

2、JS部分

import VueMarkdown from 'vue-markdown';
import markdownItAnchor from 'markdown-it-anchor';
import markdownItToc from 'markdown-it-table-of-contents';
import markdownItEmoji from 'markdown-it-emoji';
import markdownItKatex from 'markdown-it-katex';
export default {
	data() {
		return {
			markdown: '# h1 Heading\n ## h2 Heading\n ### h3 Heading',
			markdownContent: '',
			tree: [],
			plugins: [markdownItAnchor, [markdownItToc, { includeLevel: [2, 3] }], markdownItEmoji, markdownItKatex]
		};
	},
	mounted() {
		this.loadMarkdownFile();
	},
	components: {
		VueMarkdown
	},
	methods: {
		async loadMarkdownFile() {
			try {
                //引入在public文件夹下的md文件
				const response = await fetch('/XXXX.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;
			let nodeArr = [];
			let tree = [];
			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]; // 直接使用DOM元素
					let name = ele.textContent; // 获取元素的文本内容
					ele.setAttribute('id', i); // 设置元素的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++;
				}
			}
			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'
			});
		}
	}
};

3、CSS样式

.page-api {
	display: flex;
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	background-color: #fff;
}
.api-tree {
	position: fixed;
	right: 20px;
	top: 120px;
	width: 250px;
	height: 600px;
	margin-right: 10px;
	overflow-y: scroll;
	/* text-overflow: ellipsis; */
	z-index: 99;
	.el-tree {
		background: none;
		color: #686868;
		.el-tree-node:focus > .el-tree-node__content,
		.el-tree-node__content:hover {
			background: none;
			color: rgb(24, 144, 255);
		}
	}
}
.api-tree::-webkit-scrollbar {
	width: 8px;
}

.api-content {
	flex: 1;
	width: 80%;
	margin-left: 20px;
	margin-right: 220px;
	padding: 0 30px;
	h2 {
		margin-left: 20px;
		margin-bottom: 10px;
	}
	h3 {
		margin-left: 25px;
		margin-bottom: 8px;
	}
	h4 {
		margin-left: 30px;
		margin-bottom: 5px;
	}
	li {
		margin-left: 40px;
	}
	code {
		border-radius: 2px;
		color: #ffaa7f;
		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;
	}
}
.page-api::-webkit-scrollbar {
	width: 8px;
}
/* 滚动条滑块样式 */
.page-api::-webkit-scrollbar-thumb {
	background-color: #888; /* 设置滑块背景颜色 */
	border-radius: 4px; /* 设置滑块圆角 */
}

4、效果展示