prismjs 框架,网页高亮显示代码,java代码,php代码等等

    Prism 是一种轻量级的，可扩展的语法突出显示工具，在构建时考虑了现代Web标准。它已在数千个网站中使用，包括您每天访问的一些网站。

官方网址：https://prismjs.com/   

使用BootCDN引入依赖：https://www.bootcdn.cn/prism/1.15.0/   

官方网站按需下载依赖：https://prismjs.com/download.html   

如下图：

案例代码：

<link rel="stylesheet" media="screen" href="https://mchweb.oss-cn-zhangjiakou.aliyuncs.com/assets/addons/prism/css/theme/prism-coy.css" />
<link rel="stylesheet" media="screen" href="https://mchweb.oss-cn-zhangjiakou.aliyuncs.com/assets/addons/prism/css/plugin/prism-line-numbers.css" />
<script type="text/javascript" src="https://mchweb.oss-cn-zhangjiakou.aliyuncs.com/assets/addons/prism/js/prism.js"></script>
<style>
  :not(pre) > code, pre {font-size: 14px; white-space: pre-wrap;word-wrap: break-word;word-break: break-all;}
  .line-numbers .line-numbers-rows {width: 2.0em;}
  pre[class*="language-"].line-numbers.line-numbers code { padding-left: 2.2em; }
  pre[class*="language-"]>code { border-left: 2px solid #358ccb; }
</style>
<script>
  $(document).ready(function(){ $("pre[class*='language-'],code[class*='language-']").addClass('line-numbers'); });
</script>
<link href="https://cdn.bootcdn.net/ajax/libs/prism/1.15.0/plugins/toolbar/prism-toolbar.min.css" rel="stylesheet" />
<script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/prism/1.15.0/plugins/toolbar/prism-toolbar.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/prism/1.15.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>

说明：

将域名换成自己服务器的，或者换成BootCDN的