一只大脸猫博客主要分享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多条会出现的报错。


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

作者:大脸猫 分类: 大脸猫PHP博客


上一篇:来自10句很火的心灵毒鸡汤,笑死人不偿命的那种 下一篇:超级搞笑的心灵毒鸡汤语录,听起来很有道理! 你并不是一无所有,至少你还有病

评论


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

相关文章

0、2021-01-13——PHP中常用的魔术方法
1、2020-10-21——构造函数在php中的使用方法
2、2020-10-21——PHP面向对象的魔术方法有哪些?
3、2020-09-25——「设计模式」PHP单例模式以及单例模式的使用案例
4、2020-07-03——PHP开发环境搭建工具有哪些?
5、2020-06-07——PHP丨PHP基础知识之流程控制WHILE循环「理论篇」
6、2020-06-07——PHP丨PHP基础知识之流程控制for循环「理论篇」
7、2020-03-04—— PHP 设计模式说明|从这里开始学习(设计模式)
8、2019-08-13——网站优化的要点都有哪些呢?我来讲讲七大点
9、2019-07-29——夏天天气炎热,那么天气太热怎么办?天气太热受不了怎么办?
10、2019-07-20——PHP开发环境:composer 下载扩展包慢怎么办?
11、2019-07-17——PHP 开发者该知道的 5 个 Composer 小技巧
12、2019-06-22——压缩图片扩展之扩展开发与使用
13、2019-06-12——PHP 7新特性五 Spread operator(数组延展操作符)
14、2019-06-01——为什么大家总喜欢黑PHP?PHP到底做错了什么
15、2019-05-24——PHP 7新特性四 Typed properties (属性类型化)
16、2019-05-23——PHP 7 新特性二 Null coalescing operator(空合并运算符)
17、2019-05-22——在线编辑器实现代码高亮展示
18、2019-05-21——PHP早已不是十年前的鸟样
Top