<template>
  <vue-markdown :source="markdownText" >
    <template v-slot:pre="">
      <p>這是一個自定義的前置處理。</p>
    </template>
    <template v-slot:code="props">
      <pre :class="'language-' + props.language">{{ props.code }}</pre>
    </template>
    <template v-slot:blockquote="">
      <blockquote>{{ props.content }}</blockquote>
    </template>
  </vue-markdown>
</template> 

// npm
npm install vue-markdown
// yarn
yarn add vue-markdown --save

<template>
  <div>
    <VueMarkdown :source="markdownText" />
  </div>
</template>

<script>
import VueMarkdown from 'vue-markdown'

export default {
  components: { VueMarkdown },
  data() {
    return {
      markdownText: '# 這是第一個標題！'
    }
  }
}
</script>

<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>

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'
			});
		}
	}
};

.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; /* 設置滑塊圓角 */
}