使百度编辑器代码高亮的方法网上一搜一大片，基本上全是在页面里引入下面这些：
1 2 3 4 5 | <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实现代码高亮显示：
（这里引入的是csdn用的同款主题：tomorrow-night-eighties）
如下：
1 2 3 | <link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script> <script >hljs.initHighlightingOnLoad();</script> |
这里使代码高亮遵循的格式是：<pre><code>你的代码</code></pre>
而百度编辑器默认的代码块显示格式为：<pre>你的代码</pre>
所以我试图在ueditor.all.js里面给pre标签嵌套code标签，结果没什么卵用
于是下面这段js代码诞生了，循环往pre标签里添加code标签（扔到代码最下面）
1 2 3 4 5 6 7 8 9 | <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> |
我们还可以给代码块自定义样式，例如：代码块宽度、字体大小、行高、不强制换行等等
1 2 3 4 5 6 7 | <style type="text/css"> #mycode{ font-size: 18px; width:500px; white-space: pre; /*不强制换行*/ } </style> |
