# shiki-viewer-tabs

**Repository Path**: aimcode/shiki-viewer-tabs

## Basic Information

- **Project Name**: shiki-viewer-tabs
- **Description**: 一个现代化的代码文件预览工具，使用 Vue 3 + Shiki 4 构建，支持多标签页管理和高性能代码高亮。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-29
- **Last Updated**: 2026-04-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 + Shiki 4 文件预览器

一个现代化的代码文件预览工具，使用 Vue 3 + Shiki 4 构建，支持多标签页管理和高性能代码高亮。

## 快速开始

```bash
# 进入项目目录
cd shiki-viewer-tabs

# 安装依赖
pnpm install

# 启动开发服务器
pnpm run dev

# 构建生产版本
pnpm run build
```

## 项目结构

```
shiki-viewer-tabs/
├── index.html                     # HTML 入口
├── package.json                   # 项目配置
├── package-lock.json              # npm 依赖锁定
├── pnpm-lock.yaml                 # pnpm 依赖锁定
├── vite.config.ts                 # Vite 配置
├── tsconfig.json                  # TypeScript 配置
├── tsconfig.node.json             # TypeScript Node 配置
└── src/
    ├── main.ts                    # 应用入口
    ├── App.vue                    # 根组件（多标签页管理）
    ├── App copy.vue               # 备份文件
    ├── style.css                  # 全局样式
    ├── types.ts                   # 类型定义
    ├── vite-env.d.ts              # Vite 环境类型
    ├── components/
    │   ├── FileTree.vue           # 文件树组件
    │   ├── FileTreeItem.vue       # 递归文件树项
    │   ├── CodeViewer.vue         # 代码预览组件
    │   └── tips/
    │       ├── index.ts           # 提示组件导出
    │       └── tips.vue           # 提示组件
    ├── composables/
    │   ├── useShiki.ts            # Shiki 核心配置
    │   ├── useHighlightWorker.ts  # Web Worker 高亮调度
    │   └── useFileSystem.ts       # 文件系统处理
    ├── workers/
    │   └── highlight.worker.ts    # Worker 线程执行高亮
    ├── utils/
    │   ├── icons.ts               # 文件图标工具
    │   └── icons copy.ts          # 备份文件
    └── static/
        └── images/
            ├── logo.png           # 应用图标
            └── favicon.ico        # 网站图标
```

## 核心特性

### 🗂️ 多标签页文件预览

- 点击左侧文件树中的文件，右侧打开新标签页
- 已打开的文件点击后切换到对应标签
- 标签页支持关闭（点击 × 按钮）
- 最后一个标签页不可关闭

### 🎨 代码高亮

基于 Shiki 4 实现高性能代码高亮：

- **Fine-Grained Bundle** — 只打包需要的语言/主题
- **JavaScript RegExp Engine** — 无需 WASM，更快启动
- **Singleton Shorthands** — 按需加载，自动缓存
- **Web Worker** — 离线高亮，不阻塞 UI

支持的语言：Vue、TypeScript、JavaScript、CSS、SCSS、HTML、Markdown、Python、Java、Go、C#、SQL、YAML 等。

### ⚙️ 主题切换

支持多种代码主题切换：
- Dark+ (默认)
- Light+
- Monokai
- Nord
- GitHub Dark
- 更多...

### 📋 快速操作

- **复制代码** — 一键复制当前文件内容
- **代码折叠** — 支持代码块折叠展开
- **语法高亮** — 精准的语法着色

## 技术栈

| 技术 | 版本 | 说明 |
|------|------|------|
| Vue | ^3.4.21 | 渐进式 JavaScript 框架 |
| TypeScript | ~5.4.0 | 类型安全 |
| Vite | ^5.2.0 | 下一代前端构建工具 |
| Shiki | ^4.0.0 | 代码语法高亮引擎 |
| @shikijs/langs | ^4.0.0 | Shiki 语言包 |
| @shikijs/themes | ^4.0.0 | Shiki 主题包 |

## 开发

```bash
# 启动开发服务器
pnpm run dev

# 构建生产版本
pnpm run build

# 预览生产构建
pnpm run preview
```
## 项目预览

![项目截图1](./images/1.png)
![项目截图2](./images/2.png)
![项目截图3](./images/3.png)
![项目截图4](./images/4.png)
![项目截图5](./images/5.png)
![项目截图6](./images/6.png)

## License

MIT