nuxt服务器端渲染使用prismjs代码高亮必须刷新下页面才起效果

最新推荐文章于 2023-04-11 09:47:01 发布
最新推荐文章于 2023-04-11 09:47:01 发布
阅读量792 收藏
点赞数 1
分类专栏： vue javascript 文章标签： prismjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/my466879168/article/details/106390276
版权

解决必须刷新下代码才高亮的问题

用prismjs给网站的代码加了高亮的效果，使用起来非常简单，引入一个css文件和一个js文件即可，但是通过ajax获取数据后，会发生样式没其效果的问题，必须刷新下才有效果，解决办法如下：
只需要在mounted里面执行一下代码即可：

//下面这行代码解决prismjs不能异步加载必须刷新一下才显示的问题
    process.browser &&document.querySelectorAll("pre code").forEach(block => Prism.highlightElement(block));

这样页面展示的时候就有prism的样式了

香荣如梦
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
ckeditor4使用最新的Prism插件代码高亮异常问题解决
低调的http://
07-02 845
ckeditor4 插件Prism更新到最新的版本会出现无法高亮或者高亮不正确的现象，可能最新Prism版本和codesnippet不兼容造成，只需要修改codesnippet插件两个地方既可以解决 1、找到codesnippet插件源码 默认不自带此插件,需要自己下载，然后将解压的目录放在plugins下，下载地址和说明见附件 plugins/codesnippet/plugin.j...
4.16-《手把手教您使用Nuxt3框架(Nuxt3中文开发教程)》渲染模式
DVTOP的博客
11-25 918
渲染是js组件转换为HTML元素，浏览器和服务端都可以解释JavaScript代码来渲染Vue。Nuxt3支持客户端和通用渲染。
nuxt-seo-meta:支持为nuxtjs生成各种seo元信息
05-20
适度元 支持Nuxt轻松生成SEO元数据 安装 yarn add nuxt-seo-meta //or npm npm add nuxt-seo-meta 将配置添加到nuxt.config.js文件。 { ... your options modules : [ 'nuxt-seo-meta' , ] , seoMeta : { title : 'SEO Meta Demo' , description : 'SEO Description' } } 在nuxtjs上下文中使用$seoMeta方法，一般我们可以在aysncData钩子处使用 async asyncData ( { $seoMeta } ) { $seoMeta ( { title : "PageTitle" , description : "Pag
nuxt 前端上新版本，需要强制刷新页面
weixin_46183811的博客
04-11 1291
在上述代码中，我们向页面的头部添加了Cache-Control、Pragma和Expires等缓存控制头部信息，从而禁用了浏览器的缓存功能，确保每次加载页面时都可以获取最新版本的页面。在构建Nuxt.js应用程序时，可以通过在构建命令中添加--no-cache选项来禁用缓存。以上两种方法都可以有效地解决Nuxt.js页面缓存问题，确保新版本的页面可以立即生效。这将禁用缓存，并在每次构建时生成新的构建文件，从而确保新版本的页面可以立即生效。在构建Nuxt.js应用程序时启用缓存无效化。
Nuxt3中使用prismjs高亮代码
CXW1014的专栏
02-07 506
项目需要高亮显示markdown文档中的代码。刚开始使用的是highlight库，但使用中发现这个库对一些语言的支持不太好，然后换成prism库，发现这个库语言支持能力和样式都不错，所以就选择这个库。prism 库在浏览器加载后，会自动调用highlightAll, 来高度HTML中的代码块，并根据在配置文件中配置的插件，自动执行插件模块的代码。// nextTick保证你的获取到的已转成html的markdown内容已经更新到HTML的DOM结构中了。// 然后执行高亮即可。
fastify-nuxtjs:对Nuxt的Fastify的Vue服务器端渲染支持
05-09
Vue服务器端渲染支持使用 Framework进行Fastify。 安装 用纱安装： yarn add fastify-nuxtjs nuxt 使用npm安装： npm install fastify-nuxtjs nuxt 用法 由于Nuxt在首次启动时需要一些时间才能准备就绪，因此您...
缓存服务器端使用的nuxt页面，使用redis-Node.js开发
05-27
Nuxt.js的模块，可以缓存使用redis在服务器中分发的页面。 nuxt-page-cache-with-redis Nuxt.js的模块，可以缓存使用redis在服务器中分发的页面。 该模块可以缓存渲染的页面，并在路由再次匹配时直接将其返回，以...
Vue服务器渲染Nuxt学习笔记
08-28
本篇文章主要介绍了Vue服务器渲染Nuxt学习笔记，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
nuxt 服务器渲染动态设置 title和seo关键字的操作
01-21
使用如下钩子即可，但是前提条件是 没有默认配置head的title asyncData ({ app }, callback) { app.head.title = ‘new title' callback(null, {}) }, 补充知识：vue 每个页面动态切换title keywords description ...
项目中整合 vue + nuxt + axios + vuex + vue-router 一个基于 Nuxt 的服务器端渲染
最新发布
07-13
项目介绍 项目中整合 vue + nuxt + axios + vuex + vue-router (nuxt 自带 vuex 和 vue-router)，一个基于 Nuxt 的服务器端渲染 Demo PC端项目线上地址 移动端端项目线上地址
prisma-nuxt:Prisma示例，显示如何在Nuxt应用程序中使用Prisma
05-01
全栈核 构建设置 # install dependencies $ npm install # serve with hot reload at localhost:3000 $ npm run dev # build for production and launch server $ npm run build $ npm run start # generate static project $ npm run generate 有关工作原理的详细说明，请查看 。
nuxt-markdown：高度可配置的Nuxt.js模块，用于将Markdown文件用于您的网站内容
02-14
Nuxt Markdown 不推荐使用Nuxt Markdown，而推荐使用 。 Nuxt Markdown是一个简单但可高度配置的Nuxt.js模块，它允许您将Markdown文件用于网站内容。 这使其成为从Jekyll或其他静态站点生成器上移植站点的理想模块。 内容 特征 无需配置 高度可配置，当您希望它成为 支持静态网站生成 Markdown内容的嵌套层次结构 在Markdown中使用Vue组件 在Markdown中访问和转换最重要的内容 使用可以配置的和 支持Markdown文件摘录 易于创建分类页面 入门 将nuxt-markdown作为devDependency添加到您的项目 yarn add nuxt-markdown --dev # Or npm install nuxt-markdown --save-dev 添加nuxt-markdown到buildModul
@ nuxt / content允许您在content /目录中写入，充当基于Git的Headless CMS-Vue.js开发
05-27
Nuxt Content允许您在content /目录中编写内容，并通过像API一样的MongoDB来获取Markdown，JSON，YAML，XML和CSV文件，充当基于Git的Headless CMS @ nuxt / content @ nuxt / content可以使您编写内容内容/目录，充当基于Git的Headless CMS Code在CodeSandbox上播放:clapper_board:演示视频:sparkles:发行说明:open_book:阅读文档功能强大的开发中快速热重载Markdown中的Vue组件全文本搜索支持使用nuxt生成静态站点生成强大的QueryBuilder API （类似于MongoDB）使用PrismJS突出显示markdown文件中代码块的语法。 目录生成汉
富文本编辑器tinymce使用Prism代码高亮插件遇到的问题及解决办法
低调的http://
07-20 2875
最近写博客需要选择一款文本编辑器，选了几款觉得 TinyMCE 不错，插件比较齐全，界面也比较美观，不过在使用 Prism 的时候，却出现了问题。 Q: Prism 的插件 line-numbers 必须要在 pre 标签商添加 line-numbers 的，才能显示行号，这个时候如果使用其他方式调用 Prism 的API进行渲染，则就需要额外添加这个样式就很麻烦,有没有办法解决呢? ...
hexo-prism-plus 无法正确加载，代码高亮不起作用
zzqz的博客
12-14 1839
具体来说是在3.8.0的hexo下无法正确地加载hexo-prism-plus，debug了很久没有结果，特地发邮件向你请教。 我在安装了hexo 3.8.0 、hexo-prism-plus 1.1.0后，通过 hexo server --debug 命令启动服务，控制台可以看到插件已经被加载，除此之外没有任何报错信息。打开网页，博客文章中代码部分并没有被高亮，打开开发者工具查看HTML元素，...
zblog php ajax,zblog php使用Ajax之后 自带代码高亮插件Prism失效的临时解决方法
weixin_42598278的博客
03-12 328
Prism.js是一个非常不错的用于处理网页中代码块的JavaScript库。然而，Prism.js嵌入zblog php之后，在使用了整站Ajax或者Pjax之后，自带的代码高亮插件Prism失效了，代码并没有实现高亮。需要再回调一次，强制Prism再次在当前页面运行，实现代码高亮效果。代码如下，(仅限于Zblog php)。具体是否有问题还有待测试。。。表面看上去是成功了的。$(functi...
vue nuxt.js 代码高亮 highlight.js或 prismjs 插件的用法
qq2754289818的博客
08-17 1391
vue nuxt.js 代码高亮 highlight.js或 prismjs 插件的用法。把第二步替换成 在main.js中引入highlight.js 步骤同上。还有另一个 prismjs 来实现 代码高亮。想要进一步详细的配置 高亮内容 请穿越。如果是 vue 的 main.js。在highlight.js中引入。......
nuxt使用prism.js(代码高亮插件使用)
小游
12-22 713
本文档为个人博客文档系统的备份版本、作者：小游、作者博客：点击访问 vue-cil使用这个比较简单。。 可以参考：https://juejin.im/post/5c6826a65188256ec63ef901 但是nuxt的代码我研究了半天，最后终于可以实现这个效果了 先安装 prism.js cnpm i --save Prismjs cnpm i --save babel-plugin-prismjs 然后配置一下nuxt.config.js文件 在这个位置 babel: { .
Nuxt3-跳转页面首屏空白，需要刷新问题
fat_shady的博客
08-08 3207
在nuxt3项目中 使用标签跳转之后，页面第一次都是空白，需要刷新之后才展示页面内容
Nuxt.js怎么使用服务器端渲染SSR
04-12
要使用服务器端渲染(SSR)，你需要在配置中启用mode属性，并将其设置为universal。这将设置Nuxt为服务器端向客户端提供HTML，并将JavaScript添加到该页面。你还需要在nuxt.config.js文件中配置render属性。具体的操作...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值