Ueditor富文本代码高亮显示

  • 文章
  • 作者:Hubery
  • 发布时间:2019-04-02
  • 阅读数:130
  • 分类:博客搭建
  • 标签: Django 前端

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

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


clipboard.png

把这两个文件添加到相应的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>

这样代码高就可以显示了

2.png

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

我么可以通过谷歌浏览器检查下对应代码的样式,然后调整,然后重新调整对应代码的样式,在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>

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

3.png

评论列表
优秀的你不评论一下咩!!
新的评论