使用方法,打开官网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:以树形结构显示代码块。
这些插件提供了各种不同的功能,你可以根据需要选择性地使用它们来增强代码高亮的效果。