2014最热门的JavaScript代码高亮插件推荐

 更新时间:2014年11月25日 11:28:35   投稿:hebedich  
本文给大家推荐今年最流行最热门的7款JavaScript代码高亮插件,各有优缺点,大家根据下面的介绍,选择最适合自己的一款吧。

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

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

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

  官方网站:http://alexgorbatchev.com/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编程语言代码高亮着色。

  官方网站:http://code.google.com/p/google-code-prettify/

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

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

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

      官方网站:https://highlightjs.org/

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

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

      官方网站:http://prismjs.com/

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

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

      官方网站:http://www.codeotaku.com/projects/jquery-syntax/index.en

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

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

      官方网站:http://mihai.bazon.net/projects/javascript-syntax-highlighting-engine

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

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

      官方网站:http://craig.is/making/rainbows

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

总结:

最适合自己的才是最好的,所以本文排序在前不代表最推荐,大家还是根据自己的项目需求来选择吧。

相关文章

  • webpack 如何解析代码模块路径的实现

    webpack 如何解析代码模块路径的实现

    这篇文章主要介绍了webpack 如何解析代码模块路径的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • 微信小程序的宿主环境实现代码

    微信小程序的宿主环境实现代码

    这篇文章主要介绍了微信小程序的宿主环境,包括scroll-view 组件的基本使用,text 组件的基本使用及rich-text 组件的基本使用,本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • 微信小程序实战之自定义toast(6)

    微信小程序实战之自定义toast(6)

    这篇文章主要为大家详细介绍了微信小程序实战之自定义toast的相关方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • JavaScript创建类/对象的几种方式概述及实例

    JavaScript创建类/对象的几种方式概述及实例

    JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活的,下面与大家分享下创建类/对象的几种方式,感兴趣的朋友可以了解下哈
    2013-05-05
  • 利用JS来控制键盘的上下左右键(示例代码)

    利用JS来控制键盘的上下左右键(示例代码)

    这篇文章主要介绍了利用JS来控制键盘的上下左右键示例代码。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • JS函数的call和apply的实现方法区别分析

    JS函数的call和apply的实现方法区别分析

    这篇文章主要为大家介绍了JS函数的call和apply的实现方法区别分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • 基于JS实现一个简单的投票demo

    基于JS实现一个简单的投票demo

    这篇文章主要介绍了如何利用JavaScript实现一个简单的投票demo,文中的示例代码讲解详细,对我们学习有一定参考价值,需要的可以参考一下
    2022-06-06
  • JavaScript可选链的实现示例

    JavaScript可选链的实现示例

    本文主要介绍了JavaScript可选链的实现示例,它通过使用问号(?)来判断属性或函数是否存在,避免了因为属性或函数不存在而导致的错误,具有一定的参考价值,感兴趣的可以了解一下
    2024-01-01
  • 深入浅出JSON.parse的实现方法

    深入浅出JSON.parse的实现方法

    众所周知,JSON.parse方法用于将一个json字符串转换成由字符串描述的 JavaScript 值或对象,本文主要为大家介绍了JSON.parse方法的使用,需要的可以参考下
    2024-04-04
  • JavaScript 下载链接图片后上传的实现

    JavaScript 下载链接图片后上传的实现

    这篇文章主要介绍了JavaScript 下载链接图片后上传的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03

最新评论