Vue中如何渲染Markdown和JSON

发表于： 分类于：
字数： 555 阅读：≈ 2分钟 浏览： 评论：

最近开发OpenAI提供的Assistant功能，其中有个插件叫做Code Interpreter，由于需要把Assistant的分析过程在Vue中展示一下，方便问题定位，所以Code Interpreter生成的代码肯定也是要展示的，其他过程几乎都是Markdown的格式，所以特此记录下在Vue中如何渲染Markdown，在其他场景也会经常遇到渲染Markdown的需求。

渲染Markdown

首先需要用到两个库，一个渲染markdown，一个用来高亮markdown中的代码：

1{
2  "dependencies": {
3    "vue-markdown": "^2.2.4",
4    "highlight.js": "^11.9.0"
5  }
6}

然后在 main.js 中导入一下：

 1import App from './App.vue'
 2
 3import VueMarkdown from 'vue-markdown'
 4import hljs from 'highlight.js'
 5
 6// 注意这里一定要引入高亮插件的CSS文件
 7import 'highlight.js/styles/github.css'
 8
 9Vue.component('vue-markdown', VueMarkdown)
10Vue.directive('highlight', (el) => {
11    const blocks = el.querySelectorAll('pre code')
12    blocks.forEach((block) => {
13        hljs.highlightBlock(block)
14    })
15})

然后使用就比较简单了：

 1<template>
 2    <div>
 3        <vue-markdown v-highlight>{{ content }}</vue-markdown>
 4    <div>
 5</template>
 6
 7
 8<script>
 9import VueMarkdown from 'vue-markdown'
10
11export default {
12    name: 'Name',
13    components: {
14        VueMarkdown
15    },
16    data() {
17        return {
18            content: ''
19        }
20    }
21}
22</script>

用GPT生成一段测试Markdown，表现还不错，基本markdown语法都是支持的，代码高亮也是正常的：

渲染JSON

有时候Vue里需要展示JSON，这个时候就可以用 json-view 这个库：

1{
2  "dependencies": {
3      "vue-json-views": "^1.3.0"
4  }
5}

使用非常简单，指定数据和深度即可：

 1<template>
 2    <div>
 3        <json-view :data="data"
 4                   theme="one-dark"
 5                   :deep="depth">
 6        </json-view>
 7    </div>
 8</template>
 9
10<script>
11import jsonView from 'vue-json-views'
12
13export default {
14    name: 'Name'
15    components: {
16        jsonView
17    },
18    data() {
19        return {
20            data: '',
21            depth: 5
22        }
23    }
24}
25</script>

下面是一些具体参数：