您现在的位置是：网站首页 > 心得笔记
百度编辑器(UEditor)结合highlight.js实现代码高亮显示
之前做博客的时候，尝试使用了好几种编辑器，但最终选择了ueditor，因为是技术博客，所以代码少不了，舒适的代码高亮更能让人看了舒服点........
使百度编辑器代码高亮的方法网上一搜一大片，基本上全是在页面里引入下面这些：
<script type="text/javascript" src="/Public/static/ueditor1_4_3/third-party/SyntaxHighlighter/shCore.js"></script> <link rel="stylesheet" href="/Public/static/ueditor1_4_3/third-party/SyntaxHighlighter/shCoreDefault.css"> <script type="text/javascript"> SyntaxHighlighter.all(); </script>
虽然可以实现代码高亮，但是是这种效果，并不是我想要的
我想要的是类似csdn这种黑色背景的代码高亮显示，经过各种查找比较，最终使用了highlight.js这个插件来实现效果
首先到官网去下载这个插件：https://highlightjs.org/download/
选择好语言 Download下载
解压后目录结构如下：
下面写一个例子来使用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>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>效果显示如下：
这里使代码高亮遵循的格式是：<pre><code>你的代码</code></pre>
而百度编辑器默认的代码块显示格式为：<pre>你的代码</pre>
所以，要想使用highlight实现代码高亮，需要循环往pre标签里添加code标签
//ueditor编辑器代码高亮显示代码:百度编辑器默认的代码块显示格式为：<pre>你的代码</pre>,highlight使代码高亮遵循的格式是：<pre><code>你的代码</code></pre>,所以手动添加代码：循环往pre标签里添加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 id="mycode">'+mycode+'</code>';
}我们还可以给代码块自定义样式，例如：代码块宽度、字体大小、行高、不强制换行等等
<style type="text/css">
#mycode{
font-size: 18px;
width:500px;
white-space: pre; /*不强制换行*/
}
</style>
以上内容转载至https://blog.csdn.net/msllws/article/details/81048390
关于highlight的选择有几十多种，具体的选择需要看个人喜好，我最喜欢的是modernizr.css，效果如下：
还有你个高亮风格我喜欢的，一一列出来，供大家参考：
androidstudio
atom-one-dark
atom-one-dark-reasonable
darcula
dracula
hybrid
monokai-sublime
nord
ocean
tomorrow-night
tomorrow-night-eighties
VS2015
下一篇：Laravel 的分页功能