如何在vue中引入Prism.js

最新推荐文章于 2024-12-15 23:59:16 发布

波神小波

最新推荐文章于 2024-12-15 23:59:16 发布

阅读量2.9k

点赞数 3

分类专栏： vue博客搭建问题文章标签： vue

本文链接：https://blog.csdn.net/weixin_44162337/article/details/106939224

版权

vue博客搭建问题专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在Vue项目中遇到的Prism.js代码高亮问题及解决方案。当页面刷新后代码高亮无效，以及后端返回的HTML内容中代码块缺少样式时，通过在Vue组件中动态修改HTML内容并正确调用highlightAll()方法，实现了异步数据的代码高亮显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官网下载Prism.js和Prism.css 分别放在assets/js、assets/css文件夹下（也可以放在同一个文件下，都可以的）
然后直接在main.js全局导入

import prismjs from '@/assets/js/prism'
 import prismCss from '@/assets/css/prism.css'
 Vue.use(prismjs)
Vue.use(prismCss)

如何使用：

<pre class="line-numbers">
                <code class="language-java">
                //双指针
                public boolean hasCycle(ListNode head) {
                    if(head == null || head.next == null)   return false;
                    ListNode fast = head.next;
                    ListNode slow = head;
                    while(fast != slow){
                        if(fast == null || fast.next == null)
                            return false;
                        fast = fast.next.next;
                        slow = slow.next;
                    }
                    return true;
                }
            </code></pre>

显示效果

Prism默认只有在以下标签里面的代码才会被高亮显示，

<pre class="line-numbers">
 <code class="language-java">
......
   </code></pre>

class=“line-numbers” 是添加行号，
class=“language-java” 实现java语法高亮，当然也可以设置javascript的语法高亮

使用问题

一：页面刷新后，高亮无效

组件挂载后添加highlightAll()方法

mounted(){
    .......
    Prismjs.highlightAll()
}

二：在项目中，后端返回一个article对象，然后通过 v-html把article.htmlContent显示出来，

<div  v-html="article.htmlContent"></div>

但是我们在数据库中保存的html文章里的 " <pre <code "元素是没有任何css样式的

没有 <pre=“line-numbers” <code class=“language-java” 意味着文章里的代码片段无法高亮显示

这下怎么办？

一开始我想着在 v-html里的内容被渲染时，动态添加类名，但是查阅了很多资料都不行，

头疼之际，突然想到我不可以动态添加类名但是我可以在后端返回的html内容里用正则表达式去替换<pre <code 标签啊

说干就干：

//定义替换方法
 replaceHtml(htmlContent) {
                let reg=new RegExp("<pre","g"); //创建正则RegExp对象
                let reg1=new RegExp("<code class=\"lang-\"","g");
                let stringObj=htmlContent
                let newstr=stringObj.replace(reg,`<pre class="line-numbers language-java"`);
                let newstr2=newstr.replace(reg1,`<code class="language-java"`);
               return newstr2
                /*return htmlContent*/
            },

用正则表达式替换后，<pre <code元素的确添加相应的类名了，但是高亮样式依旧加载不出来

我又蒙逼了，然后我又想，是不是Prism.js不能处理v-html里的内容，然后我又去查阅资料，没结果，然后我自己在组件内定义了一个变量且把用正则表达式替换后的一模一样的html字符串赋给它，然后用 v-html显示，结果是可以实现高亮显示的

 <div v-html="html"></div>
-------------------------------------------------------------------
   html:"<pre class=\"line-numbers\">\n" +
                    "                <code class=\"language-java\">\n" +
                    "                //双指针\n" +
                    "                public boolean hasCycle(ListNode head) {\n" +
                    "                    if(head == null || head.next == null)   return false;\n" +
                    "                    ListNode fast = head.next;\n" +
                    "                    ListNode slow = head;\n" +
                    "                    while(fast != slow){\n" +
                    "                        if(fast == null || fast.next == null)\n" +
                    "                            return false;\n" +
                    "                        fast = fast.next.next;\n" +
                    "                        slow = slow.next;\n" +
                    "                    }\n" +
                    "                    return true;\n" +
                    "                }\n" +
                    "            </code></pre>",

这下就不关v-html的原因了， v-html也只是把html形式的字符串显示出来而已，没做其他操作。

最后我终于才想到，在组件内定义的html字符串变量能被高亮显示，我后台异步请求回来的却没效果，很可能是因为我没有在节点未被赋值前进行了highlightAll()操作，导致异步请求的文章没有高亮效果

于是设置异步渲染

        setTimeout(()=>{
                            prismjs.highlightAll()
                        }
                        ,0)