首页 > 名博 > 正文

Ueditor富文本代码高亮显示

在上一篇文章中讲解了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>根据自己的需求更改就行了,我没有改动太多 ,改完后大概变为如下

网友评论

验证码 换一张
取 消
暂无评论...
为您推荐
  • 相关阅读
  • 业界资讯
  • 手机通讯
  • 电脑办公
  • 新奇数码
  • 软件游戏
  • 科学探索