vue3+ts使用 prism不生效解决方案（vue3集成 prism代码高亮显示）

如上图所示，点击图片，图片放大，再次点击图片，图片缩小回到原位。

$mediumZoom组件$ 就能很好的实现这个效果。具体的使用文档可以参考：点击访问 medium-zoom

首先引入 js 文件，这里我使用的是 cdn 上的一个js 文件。

    <script src="https://cdn.jsdelivr.net/npm/medium-zoom@latest/dist/medium-zoom.min.js"></script>

在 vue3 中使用之前需要先安装

npm install medium-zoom

然后再文章详情中进行使用：参考代码 15 到 18 行处的实现。

const articleDetails = ref()
const articleInfo = ref<IArticle>()

onMounted(async() => {
  await getArticleDetail({
    articleId: props.articleId
  }).then(res => {
    const result = res.data as IArticle
    // articleDetails.value = result.content
    articleInfo.value = result
    if (result.content) {
      articleDetails.value = result.content
      nextTick(() => {
        // 引入 mediumZoom 组件进行图片的渲染
        mediumZoom('[data-zoomable]', {
          // 打开之后非图片区域显示黑色
          background: 'rgba(0, 0, 0, 0.6)'
        });
        // 全局代码高亮(必须等获取数据之后，代码高亮才能生效，也可以用定时器定时)
        Prism.highlightAll()
      })
    }
  })
})