使用百度UEditor 的uparse来使代码高亮

摘要:
使用UEditor时,我们将找到一个UEditor.parse。js文件。这是用来做什么的?这主要是关于文章显示页面上一些复杂样式的实现,例如图表显示、代码高亮显示和自定义列表标签。我们这次讨论的是使用UEditor集成的代码突出显示插件来实现代码突出显示。首先,在编辑时选择代码语言,然后编辑并保存它。然后加载ueditor.parse。js,其中src路径是实际存储Ueditor的路径然后,当页面初始化时,解析显示内容的div。

在使用UEditor 的时候,我们会发现在UEditor 的文件夹中有一个ueditor.parse.js的文件,这个是做什么用的呢?

这个主要是在文章显示页面实现一些比较复杂的样式,比如图表展示,代码高亮,自定义的列表标号

我们本次所说的就是使用UEditor集成的代码高亮插件实现代码高亮。

首先在编辑的时候,选择一种代码语言,然后编辑保存。

使用百度UEditor 的uparse来使代码高亮第1张

然后在显示的前端页面中加载 ueditor.parse.js,其中src路径为实际存放Ueditor的路径

<script type="text/javascript" src="http://t.zoukankan.com/ueditor/ueditor.parse.js"></script>

然后在页面初始化的时候,对显示内容的那个div进行执行解析。

假设文章的div 的id为 content,则初始化代码如下:

<script type="text/javascript">
    $(function () {       
        uParse('#content', {
            rootPath: '/ueditor/'
        })
    })
</script>

其中 rootPath 为实际存放Ueditor的路径。

这样解析后显示的语法高亮结果如下(效果展示网页:http://www.xiaodong.live/content/12.html):

使用百度UEditor 的uparse来使代码高亮第2张

免责声明:文章转载自《使用百度UEditor 的uparse来使代码高亮》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Gentoo Linux 安装Xfce4图形界面企业应用架构模式数据源架构模式(第10章)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

实现DataTables搜索框查询结果高亮显示

DataTables是封装好的HTML表格插件,丰富了HTML表格的样式,提供了即时搜索、分页等多种表格高级功能。用户可以编写很少的代码(甚至只是使用官方的示例代码),做出一个漂亮的表格以展示数据。关于DataTables的更多信息,请查看:http://www.datatables.club/、https://datatables.net/。下图将要展示...

vs2010(vs2012)好用的扩展插件介绍

  一直以来只使用番茄vs助手(https://www.wholetomato.com/downloads/default.asp)辅助写代码,也都忘了是谁介绍的,不过确实好用。 相比原始的vs,它提供了很多改进功能。例如,重命名变量,高亮宏与自定义类型,查找引用,智能代码提示等。   因为一直以来用着没有觉得不爽的地方,所以对于vs的其它插件都没做研究。...

基于vue实现搜索高亮关键字

有一个需求是在已有列表中搜索关键词,然后在列表中展示含有相关关键字的数据项并且对关键字进行高亮显示,所以该需求需要解决的就两个问题: 1.搜索关键词过滤列表数据 2.每个列表高亮关键字 ps: 此问题基于数组对象,其他数据类型也可参考此思路。 关键词搜索:过滤数据很简单,无非就是监听search,对源数据过滤即可,贴一下代码: 1 const search...

3.6 Lucene基本检索+关键词高亮+分页

3.2节我们已经运行了一个Lucene实现检索的小程序,这一节我们将以这个小程序为例,讲一下Lucene检索的基本步骤,同时介绍关键词高亮显示和分页返回结果这两个有用的技巧。 一、Lucene检索的基本步骤 1 import java.nio.file.Paths; 2 import java.io.*; 3 4 import org.apac...

富文本编辑器UEditor自定义工具栏(一、基础配置与字体、背景色、行间距、超链接实现)

导读:UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,功能强大,可定制,是一款优秀的国产在线富文本编辑器,编辑器内可插入图片、音频、视频等。 一、UEditor自定义工具栏效果图如下: 二、UEditor富文本编辑器环境搭建及项目引用 环境搭建不再赘述,请自行查阅或者参考以下链接 1.UEditor官网:http://u...

asp网站中使用百度ueditor教程

1、根据网站类型及编码选择相应的ueditor版本,如我的网站编码为gb2312,则选择ueditor1.43aspgbk版。2、本机IE浏览器应为8.0或以上,8.0以下的ueditor1.43不支持。3、把ueditor文件夹放于网站根目录下,在网页<head>与</head>间插入以下内容:注意src后的路径根据实际位置修改。...