基于uni-app+vue3渲染markdown格式|uniapp软键盘顶起问题解决方案

前些时候有给大家分享一篇uni-app+vite4+uview-plus搭建跨端项目。今天主要分享下在uniapp中渲染markdown语法及uniapp中软键盘弹起，页面tabbar或顶部自定义navbar导航栏被撑起挤压的问题。

如上图：支持h5+小程序+App端markdown解析渲染。

上面则是演示了在App端+小程序端键盘弹起，整体页面及自定义导航条不会被顶跑的问题。

好了，话不多说，接下来就主要介绍下如何实现的吧。

uniapp+vue3解析markdown语法/高亮

虽说uniapp插件市场也有一些markdown渲染插件，但大多兼容性不好。于是就使用了markdown-it及highlight.js插件进行了简单的封装处理。经调试目前可以支持h5/小程序/App端的markdown语法解析。

// 引入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'