网页文本编辑器中的代码片段高亮效果（分颜色显示）

网页中用百度的ueditor作为文本编辑器很常见，功能也很强大，其中可以插入代码片段，这是程序员常用的功能，但是习惯了带有色彩显示的代码，就不喜欢看一麻黑的，其实百度的ueditor集成了代码高亮插件SyntaxHighlighter，只需要引用即可。

下图是未高亮之前代码片段显示效果：

下图是高亮之前代码片段显示效果：

效果区别很大，还是高亮的代码看起来比较直观，易读。

对于使用百度的ueditor作为文本编辑器的，只需要查看ueditor目录中是否有shCore.js和shCoreDefault.css这2个文件，有的话只需要在需要显示页面代码中最后面添加如下代码：

<script type="text/javascript" src="/include/ueditor/third-party/SyntaxHighlighter/shCore.js"></script>
<link rel="stylesheet" href="/include/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css">
<script type="text/javascript">
    SyntaxHighlighter.all();
</script>

其中的文件路径自行调整为自己实际项目中的路径。

千万不要少写东西，少写东西无法显示。正确加上代码就OK了，很简单。

但是有时候代码过长，在后台预览时没有问题，一发布到前台页面就有可能不会自动换行，尤其是在移动设备上查看，效果很差。

找到/include/ueditor/third-party/SyntaxHighlighter中的shCoreDefault.css样式文件，在.syntaxhighlighter中加入word-break:break-all;

设置完成之后，前台的高亮代码就会自动的换行了，移动设备上效果也就出来了。

转载：感谢您对正月二十四工作室的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源正月二十四工作室”。

很赞哦！ ()