javascript - Vue 组件未突出显示代码语法
问题描述
我有一个非常简单的 VueJS 应用程序,并且我的一个组件中有一个 TinyMCE 编辑器,它使用 Prism 突出显示代码语法。在 TinyMCE 编辑器中键入时,代码看起来很好,因为在 tinymce 编辑器中编写时通常 prism 会突出显示语法。我保存所有 html 代码并将其呈现在不同的组件上。
我到处搜索,但没有找到任何合适的东西来纠正这个问题。我将向您展示组件代码。
<template>
<v-row>
<v-col cols="6">
<v-card class="blog-data">
<div v-html="blogs"></div>
</v-card>
</v-col>
</v-row>
</template>
我正在做的是,我从 api 请求数据并保存到blogs
变量中,然后将其作为原始 html 传递到 vue 组件中。
请让我知道,我在这里做错了什么,以便我可以正确解决这个问题。顺便说一句,我正在尝试嵌入 html 编辑器以用于博客目的,它可以突出显示具有许多格式化功能的代码。我的网站可在https://www.springcoders.co.in上找到
解决方案
我已经解决了这个问题,我们需要做的就是手动将数据分配给组件,然后在 vue 挂载的钩子中,我们需要使用 Prism APiPrism.highlightAll()
工作得很好。
推荐阅读
- javascript - 在 jQuery 中访问 Django 模型
- ffmpeg - 使用 FFmpeg 检测音频中的静音(但不是绝对静音)
- python - 在python中绘制两个变量图
- android - 如何将可绘制对象保存在文件中以便稍后将可绘制对象与 ImageView 关联
- c# - Dynamics CRM QueryExpression 嵌套的 LinkedEntity
- php - Union 2表sql,只显示第一个查询
- r - 如何在旧的、不兼容的 R 版本上安装新的 R 包
- preact - 如何将 Preact 网站嵌入到现有网站中?
- xamarin.forms - 网格与 iOS 中的 ListView 重叠 - XamarinForms
- python - Dask:使用典型的 numpy 索引更新 dask 数组中的值时出现赋值错误