# dify-markdown-parse

此项目仅能用于`vue3`项目中，核心功能为解析`markdown`文本。

如果主项目是`react`项目，可直接使用`react-markdown`进行`markdown`的解析和展示。

如果主项目是`vue`项目，则可以考虑使用此方法进行`markdown`的解析和展示。

此项目参考`dify`中使用的`react-markdown`，并进行相应的改写，使得`dify`的`markdown`解析方案能用于`vue3`项目中。

`dify`中的`markdown`解析方法较为复杂，并不是单纯的将`markdown`源字符串进行解析然后展示，而是经过了解析、抽象语法树的构建、react组件的生成等一系列工作，最终在界面上呈现出`markdown`的解析结果。所以和直接解析`markdown`源字符串并展示的方案相比，可能存在一些细节上的差异。

## 使用方法

### 安装

```bash
$ npm install --save git+http://gitlab.smartai.com/zhupei/dify-markdown-parse.git
```

### 在项目中使用

```js
import difyMarkdownParse from 'dify-markdown-parse'

const markdown = `
# hello world

* 苹果
* 香蕉
`

const result = difyMarkdownParse(markdown);

console.log(result); // 请查看下方输出结果
```

> 输出结果

```
<h1>hello world</h1>
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>
```