百度编辑器代码高亮

最新推荐文章于 2024-10-10 07:04:47 发布

木凡007

最新推荐文章于 2024-10-10 07:04:47 发布

阅读量1.6k

点赞数

分类专栏： js区

本文链接：https://blog.csdn.net/linfanhehe/article/details/51999830

版权

js区专栏收录该内容

13 篇文章 0 订阅

订阅专栏

写技术文章的时候，通常需要插入代码，为了美观，百度编辑器给我们提供了一个漂亮的边框。但是有一个问题是就在后台编辑器编辑、预览的时候都能看的到，一发布到前台就没有了。这个问题，官方给出了答案。

只需要在前台需要显示代码的页面调用如下代码即可：

这样，你就能看到和这个一样的效果了！

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

百度编辑器在编辑写入数据库后，在从数据库中调用出来插入编辑器的时候如果出现原来插入的代码影藏了，这是因为百度过滤掉了；

问题描述：

在内容里面插入代码高亮显示，后台编辑器中是可以自动换行的，但是发表后，在前台查看，发现代码不能自动换行，直接超出了内容页的边界，极不美观，虽然复制是可以完整的。

解决办法：

找到高亮代码显示的css文件 /e/data/ecmseditor/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css

具体的路径根据你的ueditor做改动

找到

复制代码代码如下:

 
 .syntaxhighlighter{width:100%!important;margin:.3em 0 .3em 0!important;position:relative!important;overflow:auto!important;background-color:#f5f5f5!important;border:1px solid #ccc!important;

改成

复制代码代码如下:

 
 .syntaxhighlighter{width:100%!important;margin:.3em 0 .3em 0!important;position:relative!important;overflow:auto!important;background-color:#f5f5f5!important;border:1px solid #ccc!important;word-break:break-all;

就是加上 word-break:break-all;

可能不同的ueditor版本css写法不一样,只要对应的位置加上这个强制换行就可以了