Prism.js 代码高亮库

2024-05-14 09:25:29

使用方法，打开官网https://prismjs.com/download.html

1、选择主题

2、选择语言

3、选择插件

然后下载CSS和JS嵌入到自己的网页中即可

<link href="/static/prism/prism.css" rel="stylesheet" />
<script src="/static/prism/prism.js?2" defer></script>


<script>
    // 在页面加载完成后手动初始化 Prism.js
    document.addEventListener('DOMContentLoaded', function() {

        //显示行号
        var pres = document.querySelectorAll('pre');
        var lineNumberClassName = 'line-numbers';
        pres.forEach(function (item, index) {
            item.className = item.className == '' ? lineNumberClassName : item.className + ' ' + lineNumberClassName;
        });
        //让百度编辑器 Editor 支持高亮
        var $codepre = $("pre[class]");
        if($codepre.length>0){
            for(var i = 0;i<$codepre.length;i++){
                var item = $codepre.eq(i);
                var language = "";
                item.attr("class").replace(/brush:([^;]+)/,function(a,b){
                    language = b;
                });
                if(language){
                    var codehtml = item.html();
                    var code = $("<code>");
                    code.attr("class","code lang-"+language);
                    code.html(codehtml);
                    item.html(code);
                    //开启高亮
                    Prism.highlightElement(code[0]);
                }
            }
        }
       
    });
</script>

这些插件是 Prism.js（代码高亮库）的插件，它们提供了额外的功能或特性，使得在网页中展示代码更加丰富和便捷。下面是每个插件的简要说明：

Line Highlight：允许你高亮显示特定行的代码。
Line Numbers：为代码行添加行号。
Show Invisibles：显示不可见字符，如空格、制表符等。
Autolinker：自动将 URL 和电子邮件地址转换为链接。
WebPlatform Docs：为代码中的 Web 平台 API 添加链接到相关文档。
Custom Class：允许自定义添加 CSS 类到代码块中。
File Highlight：高亮显示文件名。
Show Language：显示代码块的语言。
JSONP Highlight：高亮显示 JSONP 格式的代码。
Highlight Keywords：高亮显示关键词。
Remove initial line feed：移除代码块的初始换行符。
Inline color：为代码添加内联颜色。
Previewers：预览代码块。
Autoloader：自动加载代码块。
Keep Markup：保留代码块中的 HTML 标记。
Command Line：在页面上模拟命令行界面。
Unescaped Markup：允许在代码块中使用未转义的 HTML 标记。
Normalize Whitespace：规范化空白字符。
Data-URI Highlight：高亮显示 Data URI。
Toolbar：在代码块上添加工具栏。
Copy to Clipboard Button：添加复制到剪贴板按钮。
Download Button：添加下载按钮。
Match braces：匹配括号。
Diff Highlight：高亮显示差异。
Filter highlightAll：过滤 highlightAll 方法。
Treeview：以树形结构显示代码块。

这些插件提供了各种不同的功能，你可以根据需要选择性地使用它们来增强代码高亮的效果。