百度编辑器(UEditor)结合highlight.js实现代码高亮

   为了提示博客逼格,我觉得把百度的编辑器改造改造,实现高亮显示。

1、下载highlight

highlightjs 引入主题文件和js文件

image.png


2、项目引用

<script type="text/javascript" src="<?php echo BLOG_URL; ?>content/SyntaxHighlighter/highlight.pack.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo BLOG_URL; ?>content/SyntaxHighlighter/styles/atelier-lakeside-dark.css">
<script>hljs.initHighlightingOnLoad();</script>


举个栗子

<!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>hljs.initHighlightingOnLoad();</script> 
 
</head>
</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>

image.png


3、写一个js或者引用js

<script type="text/javascript">
    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 id="mycode">'+mycode+'</code>';
    }
</script>

4、还可以写一个CSS代码块宽度、字体大小、行高、不强制换行等等 (没卵用)

<style type="text/css">
#mycode{
    font-size: 18px;
    width:500px;
    white-space: pre; /*不强制换行*/
}
</style>

写在最后,本文是参(照)考(抄)李维山,独立完成编写。

发表评论

路人甲

网友评论(0)