uni-markdown基于uniapp渲染markdown语法|代码高亮效果

5,293 阅读1分钟

继上一篇给大家分享的uniapp vue3跨多端AI会话实战项目,今天给大家分享其中用到的uniapp解析.md语法结构及代码高亮效果。

uni-chatgpt基于vite+uni-app搭建跨端chatGPT对话实例

未标题-3.png

如上图:兼容H5/小程序/APP端渲染markdown语法。

uni-markdown组件已经免费发布到插件市场,下载即可使用。

ext.dcloud.net.cn/plugin?id=1…

image.png

// 引入markdown-it和highlight.js插件  
import MarkdownIt from '@/plugins/markdown-it.min.js'  
import hljs from '@/plugins/highlight/highlight.min.js'  
// import '@/plugins/highlight/github-dark.min.css'  
import '@/plugins/highlight/atom-one-light.css'  
import parseHtml from '@/plugins/html-parser.js'

001360截图20230601104058489.png

003360截图20230701104132244.png

002360截图20230701104022936.png

004360截图20230701104235458.png

如果恰好在跨端项目中有需要用到markdown解析插件,大家可以去使用看看。