blmarkdown

Vue3 Markdown 组件，支持图片、数学公式、表格、代码高亮和流程图渲染。

功能特性

• ✅ Markdown 基本语法支持
• ✅ 数学公式渲染（KaTeX）
• ✅ 代码高亮（highlight.js）
• ✅ 行号显示
• ✅ 流程图渲染（Mermaid.js）
• ✅ 表格渲染
• ✅ 图片显示
• ✅ 响应式设计

安装

npm install @kmblcmkj/[email protected]

使用方法

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

<template>
  <div>
    <bl-markdown :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.component('BlMarkdown', BlMarkdown) // 全局注册
app.mount('#app')

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

<template>
  <div>
    <bl-markdown :source="markdownContent" />
  </div>
</template>

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

Markdown 语法示例

1. 基础语法

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

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

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

> 引用文本

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

\`行内代码\`

---

2. 代码块

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

interface User {
  name: string
  age: number
}

### 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 |

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

5. 流程图

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

## 完整示例

```vue
<template>
  <div class="container">
    <bl-markdown :source="markdownContent" />
  </div>
</template>

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

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;
}
</style>

依赖

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

版本更新

• v0.1.1: 初始版本

许可证

ISC

作者

sssllg