`
天梯梦
  • 浏览: 13730237 次
  • 性别: Icon_minigender_2
  • 来自: 洛杉矶
社区版块
存档分类
最新评论

javascript实现代码高亮

 
阅读更多

9款有用的Javascript代码高亮脚本

 

Syntax highlighting is very important especially when we want to show our code example on the blog. By enabling the syntax highlighting on the blog, readers can read the code blocks easier.

 

There are a lot of free and useful syntax highlighting scripts around us. Most of the scripts are written using Javascripts, though some of them are powered by other programming languages such as Phyton or Ruby.

 

Today, we are going to look into 9 Syntax Highlighting Scripts that powered by Javascript.

 

1. SyntaxHighlighter

 

I believe this is the most common syntax highlighting script used by most of us. It supports a lot of different languages and you can easily create new “brush” for your language if it is not supported by default. Check out the custom brushes list compiled by Abel Braaksma.
syntax-highlighter

 

2. SHJS

 

SHJS stands for Syntax Highlighting in Javascript. It uses language definations from GNU Source-highlight and support a lot of different programming languages. SHJS has been tested and support major browsers sych as Firefox 2 and 3, IE 6 and 7, Opera 9.6, Safari 3.2 and Chrome 1.0.
shjs

 

3. beautyOfCode

 

beautyOfCode is a jQuery plugin for syntax highlighting. It uses the SyntaxHighlighter scripts by Alex Gorbatchev and makes it more XHTML-compliant.
beauty-of-code

 

4. Chili

 

Chili is a jQuery code syntax highlighting plugin. It comes bundled with recipes for a lot of languages and supports many configuration options.
chili

 

5. Lighter.js

 

Lighter.js is a free syntax highlighting plugin for MooTools. Using lighter.cs is as simple as adding a single script to your webpage.
lighter-js

 

6. Highlight.js

 

highlight.js is easy to use and supports a lot of programming languages. It has some plugins for easily integrations to other CMS, forum or blog.
highlight-js

 

7. DlHighlight

 

DlHighlight is a simple syntax highlighting scripts that supports only 4 programming languages: JavaScript, CSS, XML, HTML.
dlhighlight

 

8. Google Code Prettify

 

Google Code Prettify a Javascript module and CSS file that allows syntax highlighting of source code snippets in an html page. It is the scripts wich powers code.google.com.
google-code-prettify

 

9. JUSH

 

JUSH is yet another jQuery syntax highlighting plugin which supports different programming languages such as HTML, CSS, PHP, PY and SQL.
jush

 

 

来源: http://www.webdesignbooth.com/9-useful-javascript-syntax-highlighting-scripts/

 

 

 

分享到:
评论

相关推荐

    js代码高亮显示 JavaScript代码高亮 jsp

    本文将深入探讨JavaScript代码高亮的相关知识点,以及如何在JSP(JavaServer Pages)中实现这一功能。 一、JavaScript代码高亮原理 代码高亮主要是通过解析代码的语法结构,识别关键字、变量、函数等元素,并为...

    代码高亮显示javascript插件

    "代码高亮显示JavaScript插件"是专门用于在Web页面中美化和突出显示JavaScript代码的工具,它能够将原始的黑白文本代码转换为具有不同颜色、字体和样式的视觉盛宴。本文将深入探讨这一主题,详细介绍JavaScript代码...

    标签内JavaScript代码的高亮显示插件

    开发者可以通过引入这些文件到自己的项目中,或者通过npm或yarn等包管理器安装,然后调用相应的API来实现代码高亮功能。 源码分析工具在这里也起着关键作用。它们可以帮助我们理解代码的工作原理,查找错误,甚至...

    javascript开发代码高亮预研报告

    **三、代码高亮实现方式** 1. **客户端渲染**:如`Syntax Highlighter`,在浏览器端使用JavaScript处理代码块,优点是无需服务器端额外处理,但可能对性能有一定影响。 2. **服务器端渲染**:在服务器端生成带有...

    易语言超级编辑框实现的javascript代码高亮

    要实现JavaScript代码高亮,首先我们需要理解JavaScript的基本语法元素,包括关键字、变量、字符串、注释、运算符、函数、对象等。这些元素在高亮显示时通常会用不同的颜色或样式来区分。例如,关键字通常是蓝色,...

    11个代码高亮的实现方法(转)

    通常我们需要结合其他插件或库,如`highlight.js`,在`jQuery`环境中实现代码高亮。 - 使用步骤:首先引入`jQuery`和`highlight.js`库,然后选择代码元素,最后调用`highlight.js`的高亮方法。 4. **第三方库的...

    C# 代码高亮控件(目前最好的高亮解决方案)

    在C#中,实现代码高亮的方式多种多样,可以是自定义的文本框控件,也可以是利用第三方库。标题提到的“C# 代码高亮控件”很可能是一种开源或商业的控件,它专门设计用于在C#应用中展示代码,并且具有良好的性能和...

    Discuz7使用syntaxhighlighter_2.0.320实现代码高亮

    本文将详细介绍如何在Discuz7中利用syntaxhighlighter_2.0.320插件实现代码高亮显示,以提升用户在论坛中分享和阅读代码的体验。 首先,我们需要理解什么是代码高亮。代码高亮是一种通过不同颜色和样式突出显示代码...

    js实现代码示例(高亮、行号和格式)

    以下将详细介绍如何使用JavaScript实现这些功能。 1. 代码高亮: 代码高亮是通过识别代码中的关键字、变量、函数等特定语法结构,然后用不同的颜色或样式进行标记,以突出显示。JavaScript中常用的库有`Prism.js`...

    Highlightjs是一个用JavaScript写的代码高亮插件

    Highlight.js 是一个强大的、轻量级的JavaScript库,专门用于代码高亮显示。这个插件不仅适用于前端开发,还可以在服务器端应用,为开发者提供了便捷的方式来美化网页中的代码块,使其更易读、更具吸引力。由于它不...

    javascript关键字高亮代码

    文档中通过JavaScript实现了简单的关键词高亮功能。 #### HTML结构 文档首先定义了一个基本的HTML结构,包括`<!DOCTYPE html>`声明、`<html>`标签以及内部的`<head>`和`<body>`部分。其中`<head>`部分包含了元数据...

    将java代码生成html并且高亮显示的类

    这些可以通过JavaScript库如highlight.js或Prism.js实现,它们提供了现成的代码高亮功能和多种主题。 在实现这个功能时,可能会用到一些开源工具或库,比如: - **highlight.js**:这是一个广泛使用的JavaScript...

    网页代码高亮插件

    标签"网页代码高亮"提示我们关注的核心是关于如何在网页中实现代码的美化和高亮显示。这涉及到HTML、CSS和JavaScript等技术的运用。例如,HTML用于结构化代码内容,CSS用于设置高亮样式,而JavaScript则可能用于动态...

    实现代码高亮应用实例(带控件)

    本实例将探讨如何在应用程序中实现代码高亮功能,并结合特定的控件来增强用户体验。 首先,代码高亮的基本原理是通过特定的语法解析器识别代码中的关键字、注释、变量等元素,然后对这些元素应用不同的颜色和样式,...

    discuz代码高亮插件

    这一步骤表明插件可能修改了 Discuz 的核心文件,以实现代码高亮功能。用户需要注意备份原文件,以防万一出现问题可以恢复。 4. **Web.Config**:这是ASP.NET应用程序的核心配置文件,包含应用程序的全局设置,如...

    C# HTML SQL常用JS版代码高亮

    这可能是包含实现代码高亮的JavaScript代码或相关的配置文件。根据资源描述,用户可能需要查看这个文件来了解如何在项目中应用高亮功能,或者将其与自己的CSS样式结合以定制代码显示效果。 总之,本资源提供的JS版...

    PHP ueditor 的代码高亮

    实现代码高亮的核心在于ueditor中的`highlight.js`库。这个库是专门用于代码语法高亮的,它包含了大量的语言定义规则,通过匹配这些规则,对代码进行分词和着色。ueditor在接收到用户输入的代码后,会调用`highlight...

    将markdown文件转成HTML并支持代码高亮

    要将Markdown文件转换为HTML并实现代码高亮,通常会借助于JavaScript库或工具。在这个场景中,我们有一个名为"render-markdown-javascript-master"的压缩包文件,这很可能包含了一个JavaScript库或者一个简单的脚本...

Global site tag (gtag.js) - Google Analytics