阅读更多

4顶
0踩

Web前端

对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉。一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等。今天我们要来分享一些高性能的JavaScript代码高亮插件,这些JavaScript代码高亮插件将非常有效地帮你实现在网页上的代码编辑和展示。

1、SyntaxHighlighter – 最优秀的JavaScript代码高亮插件

SyntaxHighlighter 是一款完全基于JavaScript的代码高亮插件,SyntaxHighlighter可以对大部分编程语言进行着色渲染,而且代码高亮的性能也非常不错。SyntaxHighlighter 可以自定义主题文件,在初始化的时候指定自己喜欢的主题即可。

 

 2、Google Code Prettify – 自由地JavaScript代码高亮插件

Google Code Prettify是一款由Google推出的JavaScript代码高亮插件,Google Code Prettify可以对C/C++,Java,Python,Ruby,PHP,VisualBasic,AWK,Bash,SQL,HTML,XML,CSS,JavaScript,Makefiles和部分Perl编程语言代码高亮着色。



 3、Highlight.js – 多风格JavaScript代码高亮插件

Highlight.js是一个用于在任何web页面上高亮着色显示各种示例源代码语法的JavaScript项目。具有以下特色:

  • 支持 92 种语言,49 种代码格式化风格。
  • 自动检测语言种类
  • 支持多语言混合的代码高亮
  • 支持Node.js
  • 支持使用任何HTML标记
  • 兼容任意js框架

4. Prism.JS - 轻量级JavaScript代码高亮插件

Prism.JS是目前最为轻量级的JavaScript代码高亮插件,他压缩后只有2KB的大小,Prism.JS也支持大部分流行的编程语言,并且支持多种主题样式,开发者只需要引用CSS文件和JS文件即可完成。

5、jQuery.Syntax – jQuery轻量级代码高亮插件

这款代码高亮插件是基于jQuery的,同样也是轻量级的,渲染速度非常快。同时jQuery.Syntax还具有wordpress的插件应用,对于个人博主来说,使用wordpress和jQuery.Syntax可以完美实现0代买的高亮功能。

6.DlHighlight – jQuery简单高效代码高亮插件

DlHighlight是基于JavaScript的代码高亮插件,非常简单,目前只支持JavaScript, CSS, XML, HTML。 

7、Rainbow.js – 可扩展的JavaScript代码高亮插件

 

Rainbow 是JavaScript开发的语法高亮工具。被设计为轻量级(压缩后仅1.4 kb),使用简单,可扩展。语法高亮主题完全通过CSS定义。基于正则表达式实现。


 

这几个JavaScript代码高亮插件都是比较常用的,如果你有更优秀的代码高亮插件,欢迎告诉我们。

 

  • 大小: 30.2 KB
  • 大小: 32.8 KB
  • 大小: 24.3 KB
  • 大小: 41.8 KB
  • 大小: 28.8 KB
  • 大小: 33.4 KB
  • 大小: 21.4 KB
来自: 码农网
4
0
评论 共 2 条 请登录后发表评论
2 楼 cats_tiger 2014-10-12 18:18
codemirror
1 楼 王斯开 2014-10-11 15:39
                                                                                                                                                                                                  

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • ajax读取html文件填充,在页面加载期间使用Ajax函数调用填充html下拉列表

    我有一个下拉列表,需要使用json文件中的内容填充。我有一个php文件,可以解析这个json文件并回显所需的输出。这是我的json,$filecontents = file_get_contents('users.txt');$jsonIterator = new ...

  • html页面加载时触发的方法,在页面加载时触发onchange html事件

    我还希望顶部的ajax代码在页面加载和onchange上触发,以便填充第二个列表。这是因为它在编辑页面上。这是使用第一个的ajax调用function get_cities(networks) {$.ajax({type: "POST",url: "select.php", /* Th...

  • django 下拉菜单html,怎么样在Django里实现联动下拉列表选项?

    从属或链接下拉列表是一个特殊字段,它依赖于先前选择的字段,以显示已过滤选项的列表。最常见的地方就是通过地址里选择省份,然后显示出该省份下所有城市列表。以下面的应用程序为例:models.pyfromdjango....

  • php select值变化时刷新页面,php – 如何在ajax加载不同内容后刷新Select2下拉菜单?...

    所有省份都正确变化,但是当它最初加载时,Select2对于状态下拉列表显示“undefined”,即使我设置为 data-placeholder="Choose a Country..." 我假设可能是因为加载,所选的国家是“美国”,它填充一个状态列表,但...

  • JS实现页面下拉加载数据操作

    前端页面代码如下,我用的PHP,HTML页面应该就行,主要是在id="ph"的div内加载数据: <!DOCTYPE ...

  • php js下拉列表级联,如何使用jQuery在PHP中创建级联下拉列表

    国家/地区列表在页面加载时在下拉框中填充>城市列表在页面加载 – 填充城市列表的下拉框中填充基于默认国家/地区.第二种情况 – 无法做到:>用户更改国家/地区>城市列表将根据所选国家/地区进行更改我知道...

  • html怎么设置下拉列表选项,如何使用jQuery,JavaScript和HTML动态设置下拉列表的选定选项? - 程序园...

    我的选项列表使用以下脚本动态填充:function addOption(selectId, value, text, selected) {var html = ''+text+'';if (selected == "on") {html = ''+text+'';}$('#'+selectId).append(html);}function ...

  • vue 移动端列表数据 ,下拉加载下一页数据总结

    1.滚动事件的方法 ,其中currentpage是分页中的pagenum , 也就是第几页数据 人后调用列表数据接口 即可。 2. 在mounted中挂载一下滚动的...3. 在离开页面时,移出滚动事件,避免有其他的影响 这样就可以了。 ...

  • php下拉框选择地区,php – 由一系列国家/地区填充的下拉列表

    在结账时我想获得网上商店提供的国家列表并使用它,以便客户可以选择他住的地方.该国的选择是商店也出货的产品.但是我遇到了一些问题.主要的问题是它的构造方式是选择一个区域,该区域将使用URL中的额外参数重新加载...

  • 大厂是如何实现一个无限下拉列表的?

    点击上方“程序员黑叔”,选择“置顶或者星标”你的关注意义重大!文/云音乐前端技术团队阅读本文需要5分钟本文主旨长列表渲染、无限下拉也算是前端开发老生常谈的问题之一了,本文将介绍一种简洁...

  • ajax动态添加列表数据,Ajax动态为下拉列表添加数据的实现方法

    这篇文章主要为大家详细介绍了Ajax动态为下拉列表添加数据的实现方法... js部分,建一个function方法,利用ajax,指向 'getAllTypes.action' 的servlet部分,获取传来的下拉列表的数据,动态填充 function loadType...

  • jquery 动态向下拉列表填充数据,点击下拉列表时传值并触发事件

    加载页面时,动态从数据库获取数据加载到下拉列表中  function selGroups(groups){  var st=$("#gp");  $("#gp").find("option").each(function(){  $(this).remove();  });...

  • Vue - H5 移动端列表上拉页面触底加载分页数据(支持容器局部),类似uni-app微信小程序的onReachBottom()页面触底生命周期函数(监听屏幕触底事件,实现移动端下拉懒加载效果)

    H5 移动端列表上拉页面触底加载分页数据(支持容器局部),类似uni-app微信小程序的onReachBottom()页面触底生命周期函数(监听屏幕触底事件,实现移动端下拉懒加载效果),移动端上拉加载下一页数据组件,h5触底...

  • 设计无限滚动下拉加载,实践高性能页面真谛

    设计无限滚动下拉加载,实践高性能页面真谛 UX Planet论坛上有过这么一篇热门文章: Infinite Scrolling Best Practices,它从UX角度分析了无限滚动加载的设计实践。 无限滚动加载在互联网上到处都有应用: 豆瓣...

  • 若依导入导出excel时excel下拉列表选择超过50个就不显示的问题

    若依框架excel下拉选择超过50不显示的问题

  • 下拉刷新,分页加载组件封装(scroll-view)

    通过对scroll-view组件的封装,实现简单的下拉刷新,分页加载的功能 scroll-view index.html <scroll-view bindrefresherrefresh="bindrefresherrefresh" bindscrolltolower="bindscrolltolower" enhanced=...

  • 页面加载更多的css,十种加载样式

    原标题:十种加载样式对于设计师来说往往更多的是注重界面的设计,从而忽略...加载如同反馈,在人机交互中,用户与界面的每一次互动都是一次加载过程。因操作导致的页面跳转、刷新或弹窗等从而使页面元素或信息发生...

  • mui 上拉加载更多和下拉刷新

    注意:测试时记住要先将但webview的header去掉,不去掉也行,只是在下拉刷新时你会看到两个header,一个是container的header,一个是内容页面的header <!doctype html> <title></title> ,initial-scale=1...

  • Android 下拉列表框(spinner)

     需要将数据写在xml中,然后设置下拉框的entries属性,则数据自动加载到下拉框中。具体如下:  在value文件夹中新建cityInfo.xml,xml中写入 [html] view plaincopy xml version=...

  • 基于物联网智能化平台的智慧园区解决方案PPT(28页).pptx

    智慧园区,作为现代城市发展的新形态,旨在通过高度集成的信息化系统,实现园区的智能化管理与服务。该方案提出,利用智能手环、定制APP、园区管理系统及物联网技术,将园区的各类设施与设备紧密相连,形成一个高效、便捷、安全的智能网络。从智慧社区到智慧酒店,从智慧景区到智慧康养,再到智慧生态,五大应用板块覆盖了园区的每一个角落,为居民、游客及工作人员提供了全方位、个性化的服务体验。例如,智能手环不仅能实现定位、支付、求助等功能,还能监测用户健康状况,让科技真正服务于生活。而智慧景区的建设,更是通过大数据分析、智能票务、电子围栏等先进技术,提升了游客的游玩体验,确保了景区的安全有序。 尤为值得一提的是,方案中的智慧康养服务,展现了科技对人文关怀的深刻体现。通过智慧手环与传感器,自动感知老人身体状态,及时通知家属或医疗机构,有效解决了“空巢老人”的照护难题。同时,智慧生态管理系统的应用,实现了对大气、水、植被等环境要素的实时监测与智能调控,为园区的绿色发展提供了有力保障。此外,方案还提出了建立全域旅游营销平台,整合区域旅游资源,推动旅游业与其他产业的深度融合,为区域经济的转型升级注入了新的活力。 总而言之,这份智慧园区建设方案以其前瞻性的理念、创新性的技术和人性化的服务设计,为我们展示了一个充满智慧与活力的未来园区图景。它不仅提升了园区的运营效率和服务质量,更让科技真正融入了人们的生活,带来了前所未有的便捷与舒适。对于正在规划或实施智慧园区建设的决策者而言,这份方案无疑提供了一份宝贵的参考与启示,激发了他们对于未来智慧生活的无限遐想与憧憬。

Global site tag (gtag.js) - Google Analytics