百度编辑器ueditor代码高亮效果前台不显示的解决方法

  百度编辑器ueditor代码高亮效果前台不显示的解决方法

发表于1年前(2014-07-01 16:23)   阅读（ 1080） | 评论（ 0）  5人收藏此文章, 我要收藏

赞 0

12月12日北京OSC源创会 —— 开源技术的年终盛典 ?  

目录[-]

• 百度编辑器ueditor代码高亮效果前台不显示的解决方法

百度编辑器ueditor代码高亮效果前台不显示的解决方法

?

1 2 3 4 5 6 7 8 9

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

 

PS:在内容里面插入代码高亮显示，后台编辑器中是可以自动换行的，但是发表后，在前台查看，发现代码不能自动换行，直接超出了内容页的边界，造成极不美观的效果。于是想尽办法，查找问题，经过不懈努力，终于解决了此问题。
下面来分享下方法：
以下文件需要修改：
/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css
打开：shCoreDefault.css
找到81行，

?

1	<span style= "FONT-SIZE: 14px" >.syntaxhighlighter table {  <br><br>   width :  100%  !important ;  <br><br>     border :  1px  solid  #c0c0c0  !important ;  <br><br>}<br></span>

修改为：

?

1	<span style= "FONT-SIZE: 14px" >.syntaxhighlighter table {  <br><br>   width :  100%  !important ; word-break:break- all ;  <br><br>     border :  1px  solid  #c0c0c0  !important ;  <br><br>}<br></span>

即可实现自动换行，增加了一句：word-break:break-all;代码，
意思是：强制打断并换行的意思。