在线编辑器实现代码高亮展示
使用了highlight.js这个插件来实现效果
第一部到官网去下载这个插件:https://highlightjs.org/download/
选择好语言 Download下载
然后就是引入代码
//代码解析//引入样式可以在下载的目录中选择指定样式,至于要切换路径即可 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css"> //只要执行js插件 <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
面写一个例子来使用highlight.js实现代码高亮显示:
<!DOCTYPE html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <html> <head> <title>代码高亮显示测试</title> <!-- 引入下面三条 --> <link rel="stylesheet" type="text/css" href="./styles/tomorrow-night-eighties.css"> <script type="text/javascript" src="./highlight.pack.js"></script> <script type="text/javascript"> // 因为 highlighth是将代码 pre code 标签进行转换,所以我们需要进批量生产code标签 var allpre = document.getElementsByTagName("pre"); for(i = 0; i < allpre.length; i++){ { var onepre = document.getElementsByTagName("pre")[i]; var mycode = document.getElementsByTagName("pre")[i].innerHTML; onepre.innerHTML = '<code class="mycode">'+mycode+'</code>'; } } hljs.initHighlightingOnLoad();//触发插件 </script> </style> <body> <!-- 代码高亮显示格式:<pre><code>你的代码</code></pre> --> <pre><code> /** * 二维数组按照指定字段进行排序 * @params array $array 需要排序的数组 * @params string $field 排序的字段 * @params string $sort 排序顺序标志 SORT_DESC 降序;SORT_ASC 升序 */ function arraySequence($array, $field, $sort = 'SORT_DESC') { $arrSort = array(); foreach ($array as $uniqid => $row) { foreach ($row as $key => $value) { $arrSort[$key][$uniqid] = $value; } } array_multisort($arrSort[$field], constant($sort), $array); return $array; } </code></pre> </body> </html>
我们还可以给代码块自定义样式,例如:代码块宽度、字体大小、行高、不强制换行等等
PS:出处https://blog.csdn.net/msllws/article/details/81048390博客进行修改。改进code的属性使用class为id多条会出现的报错。
在线编辑器实现代码高亮展示:https://www.yzdlm.com/php/7.html
作者:大脸猫 分类: 大脸猫PHP博客
上一篇:PHP早已不是十年前的鸟样 下一篇:PHP 7新特性一 Short closures 短闭包
评论
乖,登录后才可以留言!
QQ一键登录