该项目是一个基于 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 等。
依赖
许可协议
该项目基于 MIT 许可证开源，详细信息请查看 LICENSE 文件。
贡献指南
欢迎大家 fork 本仓库并提交 pull requests。如有重大更改，请先开启 issue 讨论你想做的修改。
感谢你关注这个项目！如果觉得不错，欢迎在 GitHub 上给一个 🌟。
著作权归作者所有。
商业转载请联系作者获得授权，非商业转载请注明出处。
作者：JefskyWong ——程序猿甜品店
链接：https://www.jefsky.com/blog/348
来源：https://www.jefsky.com/