# @datawise/hyper-markdown

一个功能强大的 Vue 3 Markdown 编辑器，支持 ECharts、Mermaid、KaTeX 和数据集等丰富功能。

## 安装

```bash
npm install @datawise/hyper-markdown
```

## 快速开始

```vue
<template>
  <div id="app">
    <MarkdownEditor 
      :content="markdownContent" 
      :editable="true"
    />
  </div>
</template>

<script>
import MarkdownEditor from '@datawise/hyper-markdown'

export default {
  name: 'App',
  components: {
    MarkdownEditor
  },
  data() {
    return {
      markdownContent: '# 欢迎使用 Hyper Markdown'
    }
  }
}
</script>
```

## 特有插件语法

### 1. ECharts 图表

使用 `echarts` 代码块渲染图表：

````markdown
```echarts
{
  "title": {
    "text": "销售数据"
  },
  "xAxis": {
    "type": "category",
    "data": ["一月", "二月", "三月"]
  },
  "yAxis": {
    "type": "value"
  },
  "series": [{
    "data": [120, 200, 150],
    "type": "bar"
  }]
}
```
````

### 2. Mermaid 流程图

使用 `mermaid` 代码块渲染流程图：

````markdown
```mermaid
graph TD
    A[开始] --> B{条件判断}
    B -->|是| C[执行操作]
    B -->|否| D[结束]
    C --> D
```
````

### 3. 数据集功能

使用 `dataset` 代码块定义数据集：

````markdown
```dataset datasetId: sales_data
{
  dimensions: ["产品", "2020", "2021", "2022"],
  source: [
    {产品: "产品A", 2020: 100, 2021: 120, 2022: 150},
    {产品: "产品B", 2020: 80, 2021: 90, 2022: 110},
    {产品: "产品C", 2020: 60, 2021: 70, 2022: 85}
  ]
}
```

然后在 ECharts 中使用数据集：

```echarts
{
  dataset: dataset['sales_data'],
  title: { text: "产品销售趋势" },
  xAxis: { type: "category" },
  yAxis: { type: "value" },
  series: [{
    type: "bar",
    encode: { x: "产品", y: "2020" }
  }]
}
```
````

### 4. SQL 数据源查询

支持从数据源查询数据：

````markdown
```dataset datasetId: sql_query_1 datasourceId: sales_db
SELECT 产品, 年份, 销售额 FROM sales_data WHERE 销售额 > 100
```

使用查询结果绘制图表：

```echarts
{
  dataset: dataset['sql_query_1'],
  title: { text: "产品销售趋势" },
  xAxis: { type: "category" },
  yAxis: { type: "value" },
  series: [{
    type: "bar",
    encode: { x: "产品", y: "销售额" }
  }]
}
```
````

### 5. 栅格布局

使用 `cell` 容器创建响应式布局：

````markdown
::: cell 6
### 大单元格 (6格宽)
这是一个较大的单元格，宽度占6格

可以包含任何 Markdown 语法：
- 列表项
- 图片
- 代码等
:::

::: cell 3
### 中等单元格 (3格宽)
中等大小的单元格

```javascript
console.log('支持代码块');
```
:::
````

### 6. 自定义容器

支持多种自定义容器：

````markdown
::: warning
这是一个警告信息
:::

::: info
这是一个信息提示
:::

::: tip
这是一个小贴士
:::

::: danger
这是一个危险提示
:::
````



## 特性

- ✅ Vue 3 支持
- ✅ ECharts 图表渲染
- ✅ Mermaid 流程图支持
- ✅ KaTeX 数学公式
- ✅ 数据集表格展示
- ✅ 可编辑区域
- ✅ 自定义容器
- ✅ 响应式设计
- ✅ TypeScript 支持

## 许可证

MIT License