一只大脸猫博客主要分享PHP开发技巧、Web前端技术、网站优化、网站排名、修电脑、心灵鸡汤等一些生活中遇到的事、道理和技巧。分享更多知识给身边的朋友。
一只大脸猫博客主要分享PHP开发技巧、Web前端技术、网站优化、网站排名、修电脑、心灵鸡汤等一些生活中遇到的事、道理和技巧。分享更多知识给身边的朋友。

在线编辑器实现代码高亮展示


使用了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多条会出现的报错。


在线编辑器实现代码高亮展示:http://www.yzdlm.com/php/7.html

作者:吕宗国 分类: PHP博客


上一篇:PHP早已不是十年前的鸟样 下一篇:PHP 7新特性一 Short closures 短闭包

评论


乖,登录后才可以留言!
QQ一键登录
Top