# MarkLive

**Repository Path**: dacaba/mark-live

## Basic Information

- **Project Name**: MarkLive
- **Description**: 基于 Markdown 的全动态说明手册网页应用
- **Primary Language**: Unknown
- **License**: MPL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-12
- **Last Updated**: 2026-03-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MarkLive

一个轻量级、全动态的 Markdown 文档网站生成器，专为快速构建产品手册、技术文档和知识库而设计。

## 项目作用

MarkLive 能够将 Markdown 文件转换为美观的在线文档网站，无需构建步骤或静态生成。只需上次Markdown文档，即可实时渲染文档内容，非常适合：

- **产品使用手册** - 为软件产品创建用户指南
- **技术文档** - 构建 API 文档、开发指南等技术资料
- **知识库系统** - 搭建团队知识库、FAQ 文档
- **培训材料** - 展示培训内容和学习资料

## 核心特点

### 全动态加载
- 无需构建步骤，修改 Markdown 文件即时生效
- 基于浏览器实时渲染，部署简单
- 支持热更新内容，无需重新部署

### 灵活的菜单配置
- 支持多级嵌套菜单结构
- 提供自动生成菜单配置脚本
- 路径配置简洁直观

### 优雅的阅读体验
- 代码块自动语法高亮
- 响应式布局，适配多种设备
- 可折叠侧边栏导航
- 内容切换自动滚动到顶部

### 搜索与导航
- 全文档内容搜索
- 搜索结果点击定位到对应菜单项
- 支持键盘导航

### 易于扩展
- 基于 Vue 3 组合式 API
- 组件化设计，便于定制
- 支持自定义主题样式

## 技术栈

| 技术 | 用途 |
|------|------|
| Vue 3 | 前端框架（组合式 API） |
| Element Plus | UI 组件库 |
| markdown-it | Markdown 渲染引擎 |
| highlight.js | 代码语法高亮 |
| Axios | HTTP 请求处理 |
| Vitest | 单元测试框架 |

## 内容配置


### 自动生成菜单配置

进入 `marklive` 目录，执行以下命令自动扫描并生成菜单配置：

```bash
node generate-menu-config.cjs
```

### 手动配置菜单

在 `public/marklive/menu-config.json` 中配置导航菜单：

```json
{
  "menu": [
    {
      "title": "首页",
      "file": "marklive/README.md"
    },
    {
      "title": "使用指南",
      "children": [
        {
          "title": "安装说明",
          "file": "marklive/guide/installation.md"
        },
        {
          "title": "快速开始",
          "file": "marklive/guide/usage.md"
        }
      ]
    }
  ]
}
```

> 支持扫描当前目录及一层子目录下的所有 `.md` 文件。

## 注意事项

- `marklive/` 目录中必须存在 `README.md` 文件（文件名大小写敏感）
- 菜单配置中的 `file` 字段路径必须以 `marklive/` 开头
- Markdown 文件支持标准语法及代码块高亮

## 许可证

MIT License