Ueditor富文本代码高亮显示_ 名博_ 蚂蚁网

Ueditor富文本代码高亮显示

2019-06-05 18:12 整合编辑：@小蚂蚁

在上一篇文章中讲解了DjangoUeditor富文本编辑器的集成，但在使用时发现在前端展示页面代码高亮无效了，在网上查了下发现需要做如下修改。

找到高亮的js和css代码，把他们添加的需要展示内容的html文件下。

把这两个文件添加到相应的html文件下

<scripttype="text/javascript"src="{%static'ueditor/third-party/SyntaxHighlighter/shCore.js'%}"></script>

<linkrel="stylesheet"href="{%static'ueditor/third-party/SyntaxHighlighter/shCoreDefault.css'%}">

<scripttype="text/javascript">

SyntaxHighlighter.all();

</script>这样代码高就可以显示了

但这样看着样式有点丑而且代码行与行之间的显示太紧密了，而且一行代码过长时会溢出界面。

我么可以通过谷歌浏览器检查下对应代码的样式，然后调整，然后重新调整对应代码的样式，在HTML页面文件中加入

<style>

.syntaxhighlighter{

border:1pxsolid#ccc!important;/*代码块的边框*/

word-break:break-all;/*代码自动换行*/

background-color:#f5f5f5!important;/*代码块的背景色*/

}

.syntaxhighlightertd.gutter.line{

padding:00.5em00!important;/*行数位置*/

}

.syntaxhighlighterdiv{

margin:0.5em0!important;/*代码行间距*/

}

.syntaxhighlighter.comments,.syntaxhighlighter.commentsa{

color:#008200!important;/*注释颜色*/

}

</style>根据自己的需求更改就行了，我没有改动太多，改完后大概变为如下

Ueditor富文本代码高亮显示