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

本文链接:http://www.codeceo.com/article/7-javascript-highlighte-plugin.html
本文作者:码农网 – 小峰
原创作品,转载必须在正文中标注并保留原文链接和作者等信息。]

时间: 2024-10-05 23:55:08

7个高性能JavaScript代码高亮插件的相关文章

[转]7个高性能JavaScript代码高亮插件

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

SyntaxHighlighter代码高亮插件

SyntaxHighlighter是Google Code上的一个开源项目,主要用于给网页上的代码着色, 使用十分方便,效果也不错,而且几乎支持常见的所有语言. 使用步骤: 一.下载并解压缩SyntaxHighlighter(http://download.csdn.net/detail/itmyhome/7757359)当前版本3.0.83 二.引入文件 将解压后的scripts和styles文件夹复制到项目中,在页面中引入shCore.js和核心CSS文件shCore.css 其次引入你要高

9个实用的Javascript代码高亮脚本

代码高亮很有用,特别是在需要在网站或者blog中显示自己编写的代码的时候,或者给其他人查看或调试语法错误的时候.我们可以将代码高亮,以便阅读者可以十分方便的读取代码块,增加用户阅读代码的良好体验. 目前,有很多免费而且有用的代码高亮脚本.这些脚本大多是由Javascript语言编写,也有些使用其它语言(比如java.Phyton或Ruby)等写的. 下面来推荐最受欢迎.最实用的9个Javascript代码高亮脚本. 1. SyntaxHighlighter 我相信这是最普遍代码高亮代码.它支持多

bootstrap设计网站中添加代码高亮插件

这款插件的名字叫做google-code-prettify 使用该插件之前的效果: 使用插件之后的效果: 接下来说步骤: (1)下载两个文件 http://codecloud.sinaapp.com/google-code-prettify/prettify.css http://codecloud.sinaapp.com/google-code-prettify/prettify.js (2)在head中引入这两个文件 <link href="google-code-prettify/p

代码高亮插件SyntaxHighlighter

一 第一 解压压缩包,scripts文件夹中包含了各种语言的JS文件,在styles文件夹中是各种显示高亮的主题 第二 如何使用?首先要引入其核心javascript文件shCore.js和核心CSS文件shCore.css,这两个是必选要引入的.其次引入你要高亮的语言JS,比如我想高亮显示的是C#,那么必须引入在scripts文件夹中的shBrushCSharp.js,最后引入高亮显示的主题CSS,默认的为shThemeDefault.css 第三 下面以高亮显示JavaScript代码为例讲

google code-prettify 代码高亮插件使用方法

找代码高亮插件选了好久,还是这个使用起来比较方便. 先上链接:插件下载地址 官方使用方法地址 建议看官方的资料,我这里仅仅简要描述一下使用方法: 引入方法: 测试引入是否成功:herf 换成 自己放置的路径,打开测试网页源代码,点击css,js文件链接 能看到代码内容即OK. <link rel="stylesheet" type="text/css" href="prettify.css"> <script type=&quo

WordPress官方推荐的代码高亮插件

今天花了大半天的时间,终于选择好自己心仪的wordpress代码高亮插件,同时它也是wordpress官方推荐的代码语法高亮插件.在选择的过程中,我对比和试用了若干个代码高亮wordpress插件,包括有国人开发的wp-codebox.codecolorer.wp-syntax等,但这些插件不是很久没有更新和最新的wordpress不兼容导致安装不上,就是功能无法满足我的要求.直到我在wordpress官方网站支持文档里看到了我要的效果,以及在文章最后找到了wordpress推荐的代码高亮插件.

Word中使用代码高亮插件

Word中使用代码高亮插件 1.下载并安装:SyntaxHighlighter4Word.zip 解压,然后双击bin\word2010\Kong.SyntaxHighlighter.Word2010.vsto或bin\word2007\Kong.SyntaxHighlighter.Word2007.vsto,即可完成安装,当然前提是你装 了.net  framework 4.0. 2.在cnblogs个人设置主页设置代码颜色相间的风格. 页面定制CSS代码: #cnblogs_post_bod

MarkdownPad2代码高亮插件兼容移动端样式

如果不知道MarkdownPad2使用代码高亮插件可以查看前一篇文章<MarkdownPad2使用代码高亮插件> 先看移动端效果图: 移动端点击查看效果 或者手机扫如下二维码: 我们经常阅读微信公众号文章的时候,常常看到文章内有高亮的代码,并且这代码不会换行,可以左右拖动滚动这样的效果对于我们阅读代码很方便也很舒服,上一篇文章使用高亮插件并不兼容移动端,经过简单的对高亮代码样式得修改,再通过markdownpad2导出html,这样我们就可以在移动端查看自己的代码笔记了.这个时候有人会纳闷我在