该项目是一个基于 Vue 的 Markdown 查看器，用户可以上传.md文件并查看其内容，动态生成的目录（TOC）将根据文件中的标题自动生成。点击目录项会滚动到对应的内容区域，同时页面还包含一个“回到顶部”按钮以便快速返回顶部。
功能特色
-
文件上传：支持从本地上传.md文件，并在查看器中显示文件内容。
-
动态目录：根据 Markdown 文件中的标题自动生成目录，并可点击目录项跳转到对应的内容。
-
固定侧边栏：侧边栏在页面滚动时保持固定，方便用户随时导航。
-
回到顶部：当页面滚动到一定位置时，会显示一个“回到顶部”按钮，便于用户快速回到页面顶端。
-
响应式设计：布局响应式，样式简洁美观，适配不同的设备。
项目结构
该项目包含以下关键组件：
-
Markdown 查看组件：展示解析后的 Markdown 内容。
-
目录组件：展示动态生成的目录，并在滚动时高亮当前章节。
-
文件上传功能：支持 Markdown 文件上传并显示解析的内容。
安装
-
克隆此仓库：git clone https://github.com/jefsky/markdown-viewer.git
-
进入项目目录：cd markdown-viewer
-
安装依赖：npm install
-
启动开发服务器：npm run serve应用将运行在http://localhost:8080。
使用说明
-
点击侧边栏中的 “选择文件” 按钮上传 Markdown 文件。
-
文件上传后，内容将会显示在页面右侧。
-
侧边栏会根据 Markdown 文件中的标题自动生成目录，点击目录项将滚动到对应章节。
-
当页面向下滚动时，“回到顶部” 按钮会出现，点击可快速返回页面顶部。
代码结构
-
markdown-container：主要容器，包含侧边栏（目录和文件上传按钮）及 Markdown 内容区。
-
generateHtml()：使用marked库解析 Markdown 内容，并提取标题生成目录。
-
scrollTo()：平滑滚动到选中的标题位置。
-
IntersectionObserver：当用户滚动页面时，动态高亮对应的目录项。
自定义
样式定制
该项目使用基本的 CSS 样式，样式定义在组件的style部分，您可以根据需要进行自定义。以下是可以调整的一些关键样式：
-
侧边栏的宽度和背景颜色
-
“选择文件” 和 “回到顶部” 按钮的样式
-
目录项的字体大小和间距
-
盒子阴影和圆角效果
功能扩展
你可以通过以下方式扩展此查看器的功能：
-
Markdown 编辑器：允许用户在应用中直接编辑 Markdown 内容。
-
主题切换：支持浅色和深色模式切换。
-
文件格式支持：支持更多文件类型如.txt、.json等。
依赖
-
Vue.js：构建用户界面的 JavaScript 框架。
-
Marked.js：一个 Markdown 解析器和编译器。
-
VueScrollTo：用于平滑滚动到不同章节的 Vue 插件。
许可协议
该项目基于 MIT 许可证开源，详细信息请查看LICENSE文件。
贡献指南
欢迎大家 fork 本仓库并提交 pull requests。如有重大更改，请先开启 issue 讨论你想做的修改。
感谢你关注这个项目！如果觉得不错，欢迎在GitHub上给一个 🌟。