MVC中局部刷新使用PRISM代码高亮

Shunnet

发布于 2022-06-29 11:14:58

63600

代码可运行

文章被收录于专栏：一路走一路失去也一路拥有一路走一路失去也一路拥有

运行总次数：0

代码可运行

当你要使用 PRISM 代码高亮js时，在单个固定的html中是正常的

但是只要一局部刷新，就不能正常显示

其实很简单

当你在局部刷新肯定是把html在通过ID定位覆盖，你只要把代码高亮的执行直接写在这个局部刷新的html下面即可

就像如下

<dav class="这是要局部刷新的html代码，你得在布局页就引用js与css">
    <h1>一个标题</h1>
    <p>一个段落。</p>
</dav>
<!--直接在局部刷新代码下加代码高亮代码-->
<script>
    //这是添加显示行数，你选择JS时要选这个功能，不懂往下看
    $('pre').addClass("line-numbers");
    //代码高亮
    Prism.highlightAll();
</script>

Copy

这时就有小伙伴要问了，这个js啥的哪里来呢，又怎么操作呢，往下看

进入官网： https://prismjs.com（这里面的插件与要高亮的代码是我自己使用的）

翻到最下面点击[下载JS][下载CSS]

上才艺

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Shunnet.top</title>
    <link href="prism.css" rel="stylesheet" />
</head>
<body>
    <script src="prism.js"></script>
    <pre class="language-java">
        <code>
            public void NbClass() {
                System.out.println("hello, world");
            }
        </code>
    </pre>
</body>
</html>

Copy

输出效果