# mdTohtml

**Repository Path**: xiaofei9070/md-tohtml

## Basic Information

- **Project Name**: mdTohtml
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-02-22
- **Last Updated**: 2025-10-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3 Markdown 转 HTML 项目

这是一个基于 Vue 3 和 Vite 的项目，旨在将 Markdown 内容转换为 HTML。该项目集成了 [Toast UI Editor](https://ui.toast.com/tui-editor)，提供强大的 Markdown 编辑和预览功能。

## 项目特点

- 使用 Vue 3 的 `<script setup>` 语法，简洁高效。
- 集成 [Toast UI Editor](https://ui.toast.com/tui-editor)，支持 Markdown 编辑与实时预览。
- 支持代码语法高亮，提供更好的 Markdown 编辑体验。

## 安装依赖

在开始之前，请确保你已经安装了 Node.js 和 npm。然后运行以下命令安装项目依赖：

```bash
npm install
```

接着安装 Toast UI Editor 及其语法高亮插件：

```bash
npm install @toast-ui/editor
npm install @toast-ui/editor-plugin-code-syntax-highlight
```

## 运行项目

安装完成后，使用以下命令启动开发服务器：

```bash
npm run dev
```

项目将在 `http://localhost:3000` 上运行。你可以通过浏览器访问该地址查看项目效果。

## 项目结构

- `src/` - 项目源代码目录
  - `App.vue` - 主 Vue 组件
  - `main.js` - Vue 应用入口文件
  - `components/` - 存放可复用的 Vue 组件
    - `Editor.vue` - Markdown 编辑器组件
    - `PreView.vue` - Markdown 预览组件
    - `HelloWorld.vue` - 示例组件
  - `views/` - 页面视图组件
    - `Home.vue` - 主页视图
  - `router/index.js` - Vue Router 配置
  - `style.css` - 全局样式文件
- `public/` - 静态资源目录
  - `vite.svg` - 示例 SVG 图标
- `index.html` - 项目入口 HTML 文件
- `package.json` - 项目配置文件，包含依赖和脚本

## 使用说明

1. 在 `Editor.vue` 中，你可以使用 Toast UI Editor 提供的 API 来编辑 Markdown 内容。
2. `PreView.vue` 组件负责将 Markdown 内容渲染为 HTML。
3. 你可以在 `Home.vue` 或其他视图组件中组合使用 `Editor.vue` 和 `PreView.vue`，实现 Markdown 编辑与预览的联动。

## 贡献指南

欢迎贡献代码和反馈问题！如果你有任何建议或发现 bug，请提交 issue 或 pull request。

## 许可证

本项目采用 MIT 许可证。详情请查看项目根目录下的 `LICENSE` 文件。