`
Classicning
  • 浏览: 256657 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

highlight.js

    博客分类:
  • WEB
阅读更多
highlight.js是一个JavaScript库,它用于在网页中高亮你的程序代码,它基于RegExp。

要使用highlight.js只需:

    <script type="text/javascript" src="highlight.js"></script>
    <script type="text/javascript">
      initHighlightingOnLoad();
    </script>


不过这样可能带来较慢的速度,你可以手动指定要高亮的语言。

    <script type="text/javascript">
      initHighlightingOnLoad('html', 'css');
    </script>

注意虽然这样写了,但是JavaScript并不支持重载。

在HTML中这样引用即可。

    <pre><code class="html">...</code></pre>


要想改变默认的显示样式,可以对一些关键字的class修改样式。

    .comment {
      color: gray;
    }

    .keyword {
      font-weight: bold;
    }

    .python .string {
      color: blue;
    }

    .html .atribute .value {
      color: green;
    }


每种语言有一些类型,分别用CSS的类选择器就可以访问和修改。

Python:
    
  keyword          keyword
  number           number
  string           string (of any type)
  comment          comment
  decorator        @-decorator for functions
  function         function header "def some_name(...):"
  class            class header "class SomeName(...):"
  title            name of a function or a class inside a header
  params           everything inside parentheses in a function's or class' header

Ruby:
    
  keyword          keyword
  string           string
  subst            in-string substitution (#{...})
  comment          comment
  function         function header "def some_name(...):"
  class            class header "class SomeName(...):"
  title            name of a function or a class inside a header
  symbol           symbol

Perl:
    
  keyword          keyword
  comment          comment
  number           number
  string           string
  regexp           regular expression
  sub              subroutine header (from "sub" till "{")
  variable         variable starting with "$", "%", "@"
  operator         operator
  pod              plain old doc

PHP:
    
  keyword          keyword
  number           number
  string           string (of any type)
  comment          comment
  phpdoc           phpdoc params in comments
  variable         variable starting with "$"

HTML:
    
  keyword          HTML tag
  tag              any tag from "<" till ">"
  comment          comment
  doctype          <!DOCTYPE ... > declaration
  attribute        tag's attribute with or withou value
  value            attribute's value

CSS:
    
  keyword          HTML tag when in selectors, CSS keyword when in rules
  id               #some_name in selectors
  class            .some_name in selectors
  attr_selector    attribute selector (square brackets in a[href^=http://])
  comment          comment
  rules            everything from "{" till "}"
  value            property's value inside a rule, from ":" till ";" or
                   till the end of rule block

Django:

  keyword          HTML tag in HTML, default tags and default filters in templates
  tag              any tag from "<" till ">"
  comment          comment
  doctype          <!DOCTYPE ... > declaration
  attribute        tag's attribute with or withou value
  value            attribute's value
  template_tag     template tag {% .. %}
  variable         template variable {{ .. }}
  template_comment template comment, both {# .. #} and {% comment %}
  filter           filter from "|" till the next filter or the end of tag
  argument         filter argument

Javascript:
    
  keyword          keyword
  comment          comment
  number           number
  literal          special literal: "true", "false" and "null"
  string           string
  regexp           regular expression
  function         header of a function
  title            name of a function inside a header
  params           everything inside parentheses in a function's header

VBScript:
    
  keyword          keyword
  number           number
  string           string
  comment          comment
  built_in         built-in function

Delphi:
    
  keyword          keyword
  comment          comment (of any type)
  number           number
  string           string
  function         header of a function, procedure, constructor and destructor
  title            name of a function, procedure, constructor or destructor
                   inside a header
  params           everything inside parentheses in a function's header
  class            class' body from "= class" till "end;"

Java:
    
  keyword          keyword
  number           number
  string           string
  comment          commment
  annotaion        annotation
  javadoc          javadoc comment
  class            class header from "class" till "{"
  title            class name inside a header
  params           everything in parentheses inside a class header
  inheritance      keywords "extends" and "implements" inside class header

C++:
    
  keyword          keyword
  number           number
  string           string and character
  comment          comment
  preprocessor     preprocessor directive

RenderMan (RSL):
    
  keyword          keyword
  number           number
  string           string
  comment          comment
  preprocessor     preprocessor directive
  shader           sahder keywords
  shading          shading keywords
  built_in         built-in function

RenderMan (RIB):
    
  keyword          keyword
  number           number
  string           string
  comment          comment
  commands         command

SQL:
    
  keyword          keyword (mostly SQL'92 and SQL'99)
  number           number
  string           string (of any type: "..", '..', `..`)
  comment          comment
  aggregate        aggregate function

Smalltalk:

  keyword          keyword
  number           number
  string           string
  comment          commment
  symbol           symbol
  array            array
  class            name of a class
  char             char
  localvars        block of local variables

Axapta:
    
  keyword          keyword
  number           number
  string           string
  comment          commment
  class            class header from "class" till "{"
  title            class name inside a header
  params           everything in parentheses inside a class header
  inheritance      keywords "extends" and "implements" inside class header
  preprocessor     preprocessor directive

1C:

  keyword          keyword
  number           number
  string           string
  comment          commment
  function         header of function or procudure
  title            function name inside a header
  params           everything in parentheses inside a function header
  preprocessor     preprocessor directive


也可以用下面的类选择器来禁用高亮

<pre><code class="no-highlight">...</code></pre>


highlight.js web site
http://softwaremaniacs.org/soft/highlight/en/
分享到:
评论
1 楼 onlydo 2008-11-06  
http://softwaremaniacs.org/soft/highlight/en/
这个地址现在打不开了。

相关推荐

    jQuery基于highlight.js代码着色高亮显示特效.zip

    《jQuery结合highlight.js实现代码高亮显示特效》 在网页开发中,为了使代码更加易于阅读和理解,通常会采用代码高亮显示的方式。在这个专题里,我们将探讨如何利用jQuery库与highlight.js插件实现这一功能。jQuery...

    jQuery基于highlight.js代码着色高亮显示特效

    这里的"class='language-javascript'"用于告诉highlight.js这段代码是JavaScript语言,可以根据需要替换为其他语言类名。 然后,在页面加载完成后,使用jQuery调用highlight.js的初始化方法。这可以在文档准备就绪...

    Highlight.js是一个用JavaScript写的代码高亮插件

    Highlight.js是一个强大的JavaScript库,专门设计用于在网页上实现代码的语法高亮显示。这个插件的出现使得开发者能够轻松地为他们的代码片段添加美观且易于阅读的样式,提升用户对代码的理解和阅读体验。由于它不...

    Highlightr:基于 highlight.js,使用 Swift 实现的语法高亮库.zip

    这个库是基于highlight.js,一个非常流行的JavaScript库,用于在网页上实现代码块的语法高亮。然而,Highlightr将highlight.js的功能移植到了Swift语言,使得开发者能够在原生的iOS和macOS应用中轻松地集成语法高亮...

    js使用highlight.js高亮你的代码

    本文主要介绍如何使用`highlight.js`在JavaScript环境中为代码添加高亮效果。 首先,为了使用`highlight.js`,你需要在HTML文件中引入库的CSS样式文件和JavaScript文件。通常,你可以通过CDN(内容分发网络)来获取...

    react-highlight.js:Highlight.js库周围的简单React包装器

    安装使用NPM安装react-highlight.js: npm install react-highlight.js --save 选择highlight.js主题,并确保它包含在索引文件中。 &lt; link rel =' stylesheet ' href =' ...

    前端项目-highlight.js.zip

    3. **highlight.js**:这是一个轻量级且高度可定制的JavaScript库,它可以自动识别超过200种编程语言的语法并进行高亮。它支持自定义主题,可以轻松地集成到任何网页中,无需依赖其他库,如jQuery。 4. **使用场景*...

    angular2-highlight-js:Highlight.js与Angular集成

    angular2-highlight-js 与Angular的集成。 快速链接 安装 npm install --save angular2-highlight-js@latest highlight.js 用法 在angular.json中将您要使用的样式的highlight.js css添加到应用程序的样式中。 " ...

    highlight.js轻量级的Web代码语法高亮库

    highlight.js是一款轻量级的Web代码语法高亮库,它主要有以下几个特点:  (1)、支持118种语言和54中样式;  (2)、可以自动检测编程语言;  (3)、同时为多种编程语言代码高亮;  (4)、支持在node.js上是...

    highlightjs-copy-button.js:Highlight.js https的复制按钮插件

    Highlight.js复制按钮插件。 用法 下载插件并在highlight.js之后包含文件: &lt; script src =" path/to/highlight.min.js " &gt; &lt;/ script &gt; &lt; script src =" path/to/highlightjs-copy-button.min.js ...

    vue-highlight.js:for Vue的Highlight.js语法荧光笔组件

    Vue Highlight.js :light_bulb: 具有Highlight.js v10支持的第4版正在开发中。 请参阅分支。 :scroll: 语法荧光笔组件。 :gear: 安装 通过 : npm install highlight.js vue-highlight.js 或: yarn add ...

    vue-hljs-lite:轻量级的Highlight.js Vue组件

    vue-hljs-lite 轻量级的Highlight.js Vue组件安装npm install --save highlight.js vue-hljs-lite用法在您的main.js中: 默认的Highlight.js import导入所有语言,因此仅导入所需的库和语言可能会更有效。...

    JS库之Highlight.js的用法详解

    1. 包含Highlight.js的CSS和JavaScript文件:首先,需要从Highlight.js的官方网站下载需要的资源文件,或者通过CDN链接引入。这些资源文件包括至少一个CSS文件,用来定义代码的样式,以及一个JavaScript文件,用来...

    一款使用marked和highlight.js开发的一款markdown编辑器.zip

    一款使用marked和highlight.js开发的一款markdown编辑器好久没维护这个项目了,vue的语法已经忘干净了,使用过程中有问题,建议直接把源码拉下来,我不是个合格的开源作者。简介一款使用marked和highlight.js开发的...

    vue-highlightjs:Vue.js 2.x的Highlight.js语法高亮显示

    vue-highlightjs ...import 'highlight.js/styles/default.css' // or other highlight.js theme // Tell Vue.js to use vue-highlightjs Vue . use ( VueHighlightJS ) 在您的模板中,为了突出显示javascript代

    vuehighlightjs一个基于highlightjs的2x代码语法高亮组件

    Highlight.js会自动识别`class`属性中的语言类型,如`language-javascript`,并对代码进行相应的语法高亮处理。如果需要自定义样式,可以引用Highlight.js提供的CSS主题,或者根据需求创建自己的主题。 在实际项目...

    Highlight.js的行号插件-JavaScript开发

    Highlightjs-line-numbers.js Highlight.js行号插件。 演示| 解决方法安装Bower bower安装Highlightjs-line-numbers.js Npm npm安装Highlightjs-line-numbers.js Highlightjs-line-numbers.js Highlight.js行号插件...

    seapig, SeaPig从 Markdown 到html的转换器,带有 marked.js 和 highlight.js.zip

    seapig, SeaPig从 Markdown 到html的转换器,带有 marked.js 和 highlight.js SeaPig SeaPig从 Markdown 到html的转换器,带有 marked.js 和 highlight.js. 用法SeaPig有两个窗格左窗格是编辑器。 右窗格是HTML预览...

Global site tag (gtag.js) - Google Analytics