UEditor编辑器如何设置代码高亮?

如果是一个编程或IT类网站,页面上会有大量代码,而让代码高亮显示,显示行号等,可以使页面更美观,用户体验更好。如果后台用百度编辑器(ueditor)可以使用自带的SyntaxHighlighter来实现代码高亮。

UEditor是由百度web前端研发部开发的所见即所得富文本web编辑器,是百度的一个javascript编辑器的开源项目。

UEditor 是开源、免费的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果。

UEditor兼容性很好,是网站站长开发的首选,官网地址:UEditor官网 包含UEditor介绍、UEditor教程、UEditor 演示DEMO、UEditor使用帮助和UEditor下载。

UEditor编辑器自带SyntaxHighlighter,支持多种语言,效果不错,且缩进比较完美。

UEditor设置页面代码高亮步骤

1.引入css:

<link rel="stylesheet" href="/Public/widgets/SyntaxHighlighter/shCoreDefault.css" />

2.引入js文件(js较大,建议压缩且最好放到页面底部):

<script type="text/javascript" src="/Public/widgets/SyntaxHighlighter/shCore.js"></script>

3.初始化:

<script type="text/javascript">
    SyntaxHighlighter.all(); //代码高亮
</script>

上面路径请以实际路径为准。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/1173.html

(0)
江山如画的头像江山如画管理团队
导航特效:jquery实现当前(活动)菜单样式变化
上一篇 2018年2月8日 下午12:51
导航特效:纯css制作三级下拉导航菜单
下一篇 2018年2月9日 上午10:34

99%的人还看了以下文章

  • MXNet安装与常见问题解决:Encountered error while trying to install package

    MXNet安装与常见问题解决:Encountered error while trying to install packageMXNet安装与常见问题解决:Encountered error while trying to install packageMXNet安装与常见问题解决:Encountered error while trying to install packageMXNet安装与常见问题解决:Encountered error while trying to install package

    本文主要讲了什么是MXNet;如何在CPU、GPU上安装MXNet;以及对MXNet安装过程中出现的常见问题给出了具体的解决方法。

    2023年1月14日 编程开发
    11.6K0
  • Python安装-小白图文教程(精)

    Python安装-小白图文教程(精)Python安装-小白图文教程(精)Python安装-小白图文教程(精)Python安装-小白图文教程(精)

    python优点 python非常简单,易学。 python虽然是用c语言写的,但是它摈弃了c中非常复杂的指针,简化了python的语法。 Python程序无需修改就可以在任何平台上面运行。 Python既支持面向过程的函数编程也支持面向对象的抽象编程。 你可以把你的部分程序用C或C++编写,然后在你的Python程序中使用它们。你可以把Python嵌入你的…

    2019年3月15日 编程开发
    9.8K1
  • 如何修改从Maven中心仓库下载到本地的jar包的默认存储位置?

    如何修改从Maven中心仓库下载到本地的jar包的默认存储位置?如何修改从Maven中心仓库下载到本地的jar包的默认存储位置?如何修改从Maven中心仓库下载到本地的jar包的默认存储位置?如何修改从Maven中心仓库下载到本地的jar包的默认存储位置?

    为什么要修改从Maven中心仓库下载到本地的jar包的默认存储位置? 把jar包下载到本地的好处就是,当编译时,会优先从本地的jar包去找,如果本地存在,就直接拿来用,如果不存在,就从Maven的中心仓库去下载。 第一次执行”mvn compile”和”mvn clean”这两个命令时,Maven会去中央仓库下…

    2023年1月28日 编程开发
    1.8K0
  • jsp:include包含html文件出现中文乱码的解决方法

    在admin.jsp页面使用<jsp:include page=”left.html”/>包含了一个HTML页面,代码如下 <div id=”left”><jsp:include page=”left.html”/></div> 出现中文乱码: admin.jsp本身没有中文乱码 &lt…

    2019年11月29日
    6.9K0
  • java实现上位机与下位机串口通信实例(含java串口通信jar包下载及代码)

    java实现上位机与下位机串口通信实例(含java串口通信jar包下载及代码)java实现上位机与下位机串口通信实例(含java串口通信jar包下载及代码)java实现上位机与下位机串口通信实例(含java串口通信jar包下载及代码)java实现上位机与下位机串口通信实例(含java串口通信jar包下载及代码)

      串口通信在工程应用中很常见。 上位机与下位机 在上位机与下位机通讯过程中常通过有线的串口进行通信,在低速传输模式下串口通信得到广泛使用。 通常上位机指的是PC,下位机指的是单片机或者带微处理器的系统。下位机一般是将模拟信号经过AD采集将模拟量转换为数字量,下位机再经过数字信号处理以后将数字信号通过串口发送到上位机,相反上位机可以给下位机发送一些指令或者信…

    2023年1月7日 编程开发
    6.9K0
  • Python数据分析及可视化,科学计算练习题

    第一章 单元测试 1、 问题:数据分析是指通过分析手段、方法和技巧对准备好的数据进行探索、分析,从中发现因果关系、内部联系和业务规则,为商业提供决策参考。( )选项:A:对B:错答案: 【对】 2、 问题:Anaconda中包含了conda、Python在内的超过18个科学包及其依赖项。( )选项:A:对B:错答案: 【对】 3、 问题:数据分析是一个有目的…

    2022年1月29日
    28.9K1

发表回复

登录后才能评论

评论列表(1条)

  • 江山如画的头像
    江山如画 2018年12月27日 下午2:26

    推荐:Enlighter – 一款功能强大的WordPress代码高亮插件
    插件下载地址:https://wordpress.org/plugins/enlighter/
    可以设置样式、默认语言、缩进、行数提示等等。
    这款插件功能强大,设置简单,使用方便,且展现的代码高亮也比较友好。