2014最热门的JavaScript代码高亮插件推荐_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代码高亮插件都是比较常用的,如果你有更优秀的代码高亮插件,欢迎告诉我们。

总结:

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

时间: 2024-08-03 12:24:02

2014最热门的JavaScript代码高亮插件推荐_javascript技巧的相关文章

9个javascript语法高亮插件 推荐_javascript技巧

下面介绍的是一些纯javascript实现的语法高亮插件. 英文原文:http://www.webdesignbooth.com/9-useful-javascript-syntax-highlighting-scripts/ 1. SyntaxHighlighter我相信这个插件是我们使用多的,它支持超多的语言,如果遇到不支持的语法还支持自定义. 2. SHJSSHJS 是js语法高亮插件的代表,它支持很多编程语言,兼容Firefox 2 &3, IE 6 & 7, Opera 9.6,

7个高性能JavaScript代码高亮插件

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

bootstrap中使用google prettify让代码高亮的方法_javascript技巧

利用google prettify 让代码高亮,好看. 下载地址:  http://code.google.com/p/google-code-prettify/ http://www.bootcdn.cn/prettify/ 网络引入地址: http://cdn.bootcss.com/prettify/r298/prettify.min.js 效果图如下 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

SyntaxHighlighter语法高亮插件使用说明_javascript技巧

javascript语法高亮 复制代码 代码如下: (function(){ var el=document.getElementById("img"); var doc=document.documentElement,docBody=document.body; var oldY=(doc.scrollTop || docBody.scrollTop)+(doc.clientHeight/2 || docBody.clientHeight/2); (function(){ var

深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点_javascript技巧

具体一点就是编写高质量JavaScript的一些要素,例如避免全局变量,使用单变量声明,在循环中预缓存length(长度),遵循代码阅读,以及更多. 此摘要也包括一些与代码不太相关的习惯,但对整体代码的创建息息相关,包括撰写API文档.执行同行评审以及运行JSLint.这些习惯和最佳做法可以帮助你写出更好的,更易于理解和维护的代码,这些代码在几个月或是几年之后再回过头看看也是会觉得很自豪的. 书写可维护的代码(Writing Maintainable Code ) 软件bug的修复是昂贵的,并且

编写高质量JavaScript代码的基本要点_javascript技巧

才华横溢的Stoyan Stefanov,在他写的由O'Reilly初版的新书<JavaScript Patterns>(JavaScript模式)中,我想要是为我们的读者贡献其摘要,那会是件很美妙的事情.具体一点就是编写高质量JavaScript的一些要素,例如避免全局变量,使用单变量声明,在循环中预缓存length(长度),遵循代码阅读,以及更多. 此摘要也包括一些与代码不太相关的习惯,但对整体代码的创建息息相关,包括撰写API文档.执行同行评审以及运行JSLint.这些习惯和最佳做法可以

纯JavaScript代码实现文本比较工具_javascript技巧

先上效果图: 代码如下所示: 把源码保存为html格式的文件就可以直接运行了 <!doctype html> <html> <head> <title>文本比较工具</title> <style type="text/css"> *{padding:px;margin:px;} html,body{ overflow-y: hidden; } .edit_div{ border: px solid #CCCCCC;

Javascript简写条件语句(推荐)_javascript技巧

经常在各处牛人的代码中看到许多简写的条件表达语句,看了一些介绍这方面的文章,觉得3 ways 2 say if这篇文章(http://www.thomasfrank.se/3_ways_2_say_if.html)还不错.在这篇文章中作者对传统的if...else....?:.&&/||三种条件表达的写法的特点及用处进行了总结归纳,简述如下: 1. if...else结构 // Set r to 0 or 1 var r= Math.floor(2*Math.random()) // Se

深入浅析javascript中的作用域(推荐)_javascript技巧

所谓的作用域,可以简单理解为一个可以读.写的范围(区域),有些js经验的同学可能会说:"js没有块级作用域",js除了全局作用域外,只有函数可以创建作用域.作用域的一个好处就是可以隔离变量. 我们通过一些例子来帮助我们理解js中的作用域. alert(a); var a = 1; 如果对作用域一点不了解的同学可能会说 alert的是1或者报错:但实际上是undefined: 说到这里,我们首先说一下js逐行解析代码之前做的一些准备工作, js在逐行读代码之前,会做一些"预解析