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

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

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

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

这样代码高就可以显示了

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

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

<style>
    .syntaxhighlighter{
        border:1px solid #ccc !important;  /*代码块的边框*/
        word-break:break-all;   /*代码自动换行*/
        background-color: #f5f5f5!important; /*代码块的背景色*/
    }
    .syntaxhighlighter td.gutter .line {
        padding: 0 0.5em 0 0 !important; /*行数位置*/
    }
    .syntaxhighlighter div {
        margin: 0.5em 0 !important; /*代码行间距*/
    }
    .syntaxhighlighter .comments, .syntaxhighlighter .comments a {
        color: #008200 !important; /*注释颜色*/
    }
</style>

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