在线编辑器实现代码高亮展示
使用了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一键登录