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%的人还看了以下文章

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

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

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

    2023年1月28日 编程开发
    1.9K0
  • 第六章 Servlet技术(重点章节)

    学习目标:
    掌握Servlet的概念、特点及生命周期
    掌握Servlet与JSP的区别
    理解Servlet在Web项目中的作用
    掌握Servlet常用对象及其方法

    2018年2月22日
    7.7K0
  • python使用列表生成式生成列表 其元素为100以内所有能被3整除的数

    python : 不使用列表生成式,生成元素为100以内所有能被3整除的数,代码如下: m=[] for i in range(3,100): if (i%3==0): m.append(i) print(m) 使用列表生成式生成列表,其元素为100以内所有能被3整除的数,代码: n=[i for i in range(3,100) if(i%3==0)] …

    2020年1月2日
    139.1K0
  • 纯JSP实现计算圆的面积和周长

    一个jsp页面由元素和模板数据组成.元素是必须由jsp容器处理的部分.而模板数据是jsp容器不处理的部分,如jsp中的HTML内容 元素有三种类型: 脚本元素,指令元素, 动作元素 脚本元素:包含三个部分:声明,脚本段,表达式 声明:用于声明在其它脚本元素中可以使用的变量和方法 脚本段:是一段java代码 表达式:java语言中完整的表达式 声明 以<…

    2020年4月3日
    25.6K0
  • 图的全部知识点、考点梳理-数据结构

    讲解了图的15条相关定义,图的表示方法、最小生成树、普里姆(Prim)算法、克鲁斯卡尔(Kruskal)算法、最短路径、迪杰斯特拉算法、弗洛伊德算法、拓扑排序、AOE 网(关键路径),邻接矩阵和邻接表的比较。

    2020年10月14日
    7.4K0
  • 程序设计基础(C语言)—教学设计、教案

    教学设计——程序设计基础 教学基本信息 课程名称 程序设计基础 性质 专业基础课 学分 3 学时 48 题目 数据类型 专业年级 软件工程专业一年级 教材 书名:C程序设计(第五版) 出版社:清华大学出版社    出版日期: 2017年8月 教学背景分析 一、学习内容分析: 本节课要介绍的知识点——数据类型比较简单,但都是概念。对于这些陌生的、枯燥的纯概念性…

    2020年4月10日
    15.0K0

发表回复

登录后才能评论

评论列表(1条)

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

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