blmarkdown

Vue3 Markdown 组件，支持图片、数学公式、表格、代码高亮、流程图渲染、主题切换和 XSS 防护。

功能特性

• ✅ Markdown 基本语法支持
• ✅ 数学公式渲染（KaTeX）
• ✅ 代码高亮（highlight.js）
• ✅ 行号显示
• ✅ 流程图渲染（Mermaid.js）
• ✅ 表格渲染
• ✅ 图片显示
• ✅ 响应式设计
• ✅ 主题切换（亮色/暗色）
• ✅ TypeScript 类型支持
• ✅ XSS 防护（DOMPurify）
• ✅ 代码复制功能

安装

npm install @kmblcmkj/blmarkdown

使用方法

方法 1：在单个组件中按需引入

<template>
  <div>
    <BlMarkdown :source="markdownContent" />
  </div>
</template>

<script setup>
import BlMarkdown from '@kmblcmkj/blmarkdown'

const markdownContent = `# 标题

内容...`
</script>

方法 2：在全局注册组件

在 main.ts 或 main.js 中：

import { createApp } from 'vue'
import App from './App.vue'
import BlMarkdown from '@kmblcmkj/blmarkdown'

const app = createApp(App)
app.use(BlMarkdown) // 全局注册
app.mount('#app')

然后在任意组件中直接使用：

<template>
  <div>
    <BlMarkdown :source="markdownContent" />
  </div>
</template>

<script setup>
const markdownContent = `# 标题
内容...`
</script>

方法 3：使用主题切换功能

<template>
  <div>
    <button @click="theme = 'dark'">暗色主题</button>
    <button @click="theme = 'light'">亮色主题</button>
    
    <BlMarkdown 
      :source="markdownContent" 
      :options="{ theme }" 
    />
  </div>
</template>

<script setup>
import BlMarkdown from '@kmblcmkj/blmarkdown'
import { ref } from 'vue'

const theme = ref('dark')
const markdownContent = `# 标题

内容...`
</script>

API

Props

| 属性 | 类型 | 默认值 | 描述 | |------|------|--------|------| | source | string | '' | Markdown 源代码 | | options | object | 见下文 | 配置选项 |

Options

| 选项 | 类型 | 默认值 | 描述 | |------|------|--------|------| | theme | 'dark' \| 'light' | 'dark' | 主题选择 | | highlight | boolean | true | 是否启用代码高亮 | | lineNumbers | boolean | true | 是否显示行号 | | math | boolean | true | 是否启用数学公式渲染 | | mermaid | boolean | true | 是否启用流程图渲染 |

Markdown 语法示例

1. 基础语法

# 一级标题
## 二级标题
### 三级标题

**粗体**、*斜体*、***粗斜体***

[链接文本](链接地址)
![图片描述](图片地址)

> 引用文本

- 无序列表项
1. 有序列表项

\`行内代码\`

---

2. 代码块

```javascript
const hello = () => {
  console.log('Hello, World!')
}

interface User {
  name: string
  age: number
}

const user: User = {
  name: 'John',
  age: 30
}

### 3. 数学公式

**行内公式**：
```markdown
$E = mc^2$

块级公式：

$$
\int_0^1 x^2 dx = \frac{1}{3}
$$

$$
\sum_{i=1}^n i = \frac{n(n+1)}{2}
$$

4. 表格

| 名称 | 描述 | 版本 |
|------|------|------|
| Vue  | 前端框架 | 3.x |
| React | 前端库 | 18.x |

| 左对齐 | 居中对齐 | 右对齐 |
| :--- | :---: | ---: |
| 文本 | 文本 | 文本 |
| 123 | 123 | 123 |

5. 流程图

```mermaid
graph TD
  A[开始] --> B[处理]
  B --> C{判断}
  C -->|是| D[结果1]
  C -->|否| E[结果2]
  D --> F[结束]
  E --> F

sequenceDiagram
  participant 客户端
  participant 服务器
  客户端->>服务器: 请求数据
  服务器-->>客户端: 返回数据
  客户端->>客户端: 处理数据

## 完整示例

```vue
<template>
  <div class="container">
    <h1>Vue3 Markdown 组件测试</h1>
    
    <div class="theme-selector">
      <button 
        :class="{ active: theme === 'dark' }" 
        @click="theme = 'dark'"
      >
        暗色主题
      </button>
      <button 
        :class="{ active: theme === 'light' }" 
        @click="theme = 'light'"
      >
        亮色主题
      </button>
    </div>
    
    <BlMarkdown 
      :source="markdownContent" 
      :options="{ theme }" 
    />
  </div>
</template>

<script setup>
import BlMarkdown from '@kmblcmkj/blmarkdown'
import { ref } from 'vue'

const theme = ref('dark')

const markdownContent = `# Vue3 Markdown 组件测试

## 基础语法
### 标题
# 一级标题
## 二级标题
### 三级标题

### 强调
**粗体**、*斜体*、***粗斜体***

### 链接
[Vue.js 官方网站](https://vuejs.org)

### 图片
![Vue Logo](https://vuejs.org/images/logo.png)

## 代码块
\`\`\`javascript
const hello = () => {
  console.log('Hello, World!')
}
\`\`\`

## 数学公式
### 行内公式
$E = mc^2$ 是爱因斯坦的质能方程

### 块级公式
$$
\int_0^1 x^2 dx = \frac{1}{3}
$$

## 表格
| 名称 | 描述 | 版本 |
|------|------|------|
| Vue  | 前端框架 | 3.x |
| React | 前端库 | 18.x |

## 流程图
\`\`\`mermaid
graph TD
  A[开始] --> B[处理]
  B --> C{判断}
  C -->|是| D[结果1]
  C -->|否| E[结果2]
  D --> F[结束]
  E --> F
\`\`\`
`
</script>

<style>
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.theme-selector {
  margin-bottom: 20px;
}

.theme-selector button {
  margin-right: 10px;
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  cursor: pointer;
}

.theme-selector button.active {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}
</style>

依赖

• Vue 3.x
• highlight.js
• katex
• markdown-it
• mermaid
• dompurify

TypeScript 类型支持

组件提供了完整的 TypeScript 类型定义，可以在 TypeScript 项目中获得良好的类型提示：

import BlMarkdown from '@kmblcmkj/blmarkdown'

// 类型自动推断
const options = {
  theme: 'dark', // 类型提示：'dark' | 'light'
  highlight: true,
  lineNumbers: true,
  math: true,
  mermaid: true
}

版本更新

• v0.0.4: 添加主题切换、TypeScript 类型支持和 XSS 防护
• v0.0.3: 优化组件结构和导出方式
• v0.0.2: 修复依赖配置
• v0.0.1: 初始版本

许可证

ISC

作者

sssllg

贡献

欢迎提交 Issue 和 Pull Request 来帮助改进这个组件！

注意事项

• 组件使用了 Mermaid.js 来渲染流程图，在首次加载时会动态导入
• 为了确保安全性，组件使用 DOMPurify 对渲染后的 HTML 进行清理
• 主题切换功能会自动应用到所有元素，包括代码块、公式和表格

浏览器兼容性

• Chrome/Edge (最新版本)
• Firefox (最新版本)
• Safari (最新版本)