PrismJS
1.1、PrismJS简介
是什么 ?:a lightweight, extensible syntax highlighter, built with modern web standards in mind.
开发语言:CSSJavaScript
官方主页:http://prismjs.com
源码仓库:https://github.com/PrismJS/prism

PrismJS经过minified和gzipped压缩后只有1.5KB,即使添加语言定义代码,最大也不会超过2KB,是目前最小的代码高亮开源库。

1.2、下载PrismJS

通过bower下载:

bower install Prism --save

下载完成后,目录结构如下:

.
├── CHANGELOG.md
├── LICENSE
├── README.md
├── bower.json
├── components
│   ├── prism-abap.js
│   ├── prism-abap.min.js
│   ├── prism-actionscript.js
│   ├── prism-actionscript.min.js
│   ├── prism-apacheconf.js
│   ├── prism-apacheconf.min.js
│   ├── prism-apl.js
│   ├── prism-apl.min.js
│   ├── prism-applescript.js
│   ├── prism-applescript.min.js
│   ├── prism-asciidoc.js
│   ├── prism-asciidoc.min.js
│   ├── prism-aspnet.js
│   ├── prism-aspnet.min.js
│   ├── prism-autohotkey.js
│   ├── prism-autohotkey.min.js
│   ├── prism-autoit.js
│   ├── prism-autoit.min.js
│   ├── prism-bash.js
│   ├── prism-bash.min.js
│   ├── prism-basic.js
│   ├── prism-basic.min.js
│   ├── prism-batch.js
│   ├── prism-batch.min.js
│   ├── prism-bison.js
│   ├── prism-bison.min.js
│   ├── prism-brainfuck.js
│   ├── prism-brainfuck.min.js
│   ├── prism-bro.js
│   ├── prism-bro.min.js
│   ├── prism-c.js
│   ├── prism-c.min.js
│   ├── prism-clike.js
│   ├── prism-clike.min.js
│   ├── prism-coffeescript.js
│   ├── prism-coffeescript.min.js
│   ├── prism-core.js
│   ├── prism-core.min.js
│   ├── prism-cpp.js
│   ├── prism-cpp.min.js
│   ├── prism-crystal.js
│   ├── prism-crystal.min.js
│   ├── prism-csharp.js
│   ├── prism-csharp.min.js
│   ├── prism-css-extras.js
│   ├── prism-css-extras.min.js
│   ├── prism-css.js
│   ├── prism-css.min.js
│   ├── prism-d.js
│   ├── prism-d.min.js
│   ├── prism-dart.js
│   ├── prism-dart.min.js
│   ├── prism-diff.js
│   ├── prism-diff.min.js
│   ├── prism-docker.js
│   ├── prism-docker.min.js
│   ├── prism-eiffel.js
│   ├── prism-eiffel.min.js
│   ├── prism-elixir.js
│   ├── prism-elixir.min.js
│   ├── prism-erlang.js
│   ├── prism-erlang.min.js
│   ├── prism-fortran.js
│   ├── prism-fortran.min.js
│   ├── prism-fsharp.js
│   ├── prism-fsharp.min.js
│   ├── prism-gherkin.js
│   ├── prism-gherkin.min.js
│   ├── prism-git.js
│   ├── prism-git.min.js
│   ├── prism-glsl.js
│   ├── prism-glsl.min.js
│   ├── prism-go.js
│   ├── prism-go.min.js
│   ├── prism-groovy.js
│   ├── prism-groovy.min.js
│   ├── prism-haml.js
│   ├── prism-haml.min.js
│   ├── prism-handlebars.js
│   ├── prism-handlebars.min.js
│   ├── prism-haskell.js
│   ├── prism-haskell.min.js
│   ├── prism-haxe.js
│   ├── prism-haxe.min.js
│   ├── prism-http.js
│   ├── prism-http.min.js
│   ├── prism-icon.js
│   ├── prism-icon.min.js
│   ├── prism-inform7.js
│   ├── prism-inform7.min.js
│   ├── prism-ini.js
│   ├── prism-ini.min.js
│   ├── prism-j.js
│   ├── prism-j.min.js
│   ├── prism-jade.js
│   ├── prism-jade.min.js
│   ├── prism-java.js
│   ├── prism-java.min.js
│   ├── prism-javascript.js
│   ├── prism-javascript.min.js
│   ├── prism-json.js
│   ├── prism-json.min.js
│   ├── prism-jsx.js
│   ├── prism-jsx.min.js
│   ├── prism-julia.js
│   ├── prism-julia.min.js
│   ├── prism-keyman.js
│   ├── prism-keyman.min.js
│   ├── prism-kotlin.js
│   ├── prism-kotlin.min.js
│   ├── prism-latex.js
│   ├── prism-latex.min.js
│   ├── prism-less.js
│   ├── prism-less.min.js
│   ├── prism-lolcode.js
│   ├── prism-lolcode.min.js
│   ├── prism-lua.js
│   ├── prism-lua.min.js
│   ├── prism-makefile.js
│   ├── prism-makefile.min.js
│   ├── prism-markdown.js
│   ├── prism-markdown.min.js
│   ├── prism-markup.js
│   ├── prism-markup.min.js
│   ├── prism-matlab.js
│   ├── prism-matlab.min.js
│   ├── prism-mel.js
│   ├── prism-mel.min.js
│   ├── prism-mizar.js
│   ├── prism-mizar.min.js
│   ├── prism-monkey.js
│   ├── prism-monkey.min.js
│   ├── prism-nasm.js
│   ├── prism-nasm.min.js
│   ├── prism-nginx.js
│   ├── prism-nginx.min.js
│   ├── prism-nim.js
│   ├── prism-nim.min.js
│   ├── prism-nix.js
│   ├── prism-nix.min.js
│   ├── prism-nsis.js
│   ├── prism-nsis.min.js
│   ├── prism-objectivec.js
│   ├── prism-objectivec.min.js
│   ├── prism-ocaml.js
│   ├── prism-ocaml.min.js
│   ├── prism-oz.js
│   ├── prism-oz.min.js
│   ├── prism-parigp.js
│   ├── prism-parigp.min.js
│   ├── prism-parser.js
│   ├── prism-parser.min.js
│   ├── prism-pascal.js
│   ├── prism-pascal.min.js
│   ├── prism-perl.js
│   ├── prism-perl.min.js
│   ├── prism-php-extras.js
│   ├── prism-php-extras.min.js
│   ├── prism-php.js
│   ├── prism-php.min.js
│   ├── prism-powershell.js
│   ├── prism-powershell.min.js
│   ├── prism-processing.js
│   ├── prism-processing.min.js
│   ├── prism-prolog.js
│   ├── prism-prolog.min.js
│   ├── prism-protobuf.js
│   ├── prism-protobuf.min.js
│   ├── prism-puppet.js
│   ├── prism-puppet.min.js
│   ├── prism-pure.js
│   ├── prism-pure.min.js
│   ├── prism-python.js
│   ├── prism-python.min.js
│   ├── prism-q.js
│   ├── prism-q.min.js
│   ├── prism-qore.js
│   ├── prism-qore.min.js
│   ├── prism-r.js
│   ├── prism-r.min.js
│   ├── prism-rest.js
│   ├── prism-rest.min.js
│   ├── prism-rip.js
│   ├── prism-rip.min.js
│   ├── prism-roboconf.js
│   ├── prism-roboconf.min.js
│   ├── prism-ruby.js
│   ├── prism-ruby.min.js
│   ├── prism-rust.js
│   ├── prism-rust.min.js
│   ├── prism-sas.js
│   ├── prism-sas.min.js
│   ├── prism-sass.js
│   ├── prism-sass.min.js
│   ├── prism-scala.js
│   ├── prism-scala.min.js
│   ├── prism-scheme.js
│   ├── prism-scheme.min.js
│   ├── prism-scss.js
│   ├── prism-scss.min.js
│   ├── prism-smalltalk.js
│   ├── prism-smalltalk.min.js
│   ├── prism-smarty.js
│   ├── prism-smarty.min.js
│   ├── prism-sql.js
│   ├── prism-sql.min.js
│   ├── prism-stylus.js
│   ├── prism-stylus.min.js
│   ├── prism-swift.js
│   ├── prism-swift.min.js
│   ├── prism-tcl.js
│   ├── prism-tcl.min.js
│   ├── prism-textile.js
│   ├── prism-textile.min.js
│   ├── prism-twig.js
│   ├── prism-twig.min.js
│   ├── prism-typescript.js
│   ├── prism-typescript.min.js
│   ├── prism-verilog.js
│   ├── prism-verilog.min.js
│   ├── prism-vhdl.js
│   ├── prism-vhdl.min.js
│   ├── prism-vim.js
│   ├── prism-vim.min.js
│   ├── prism-wiki.js
│   ├── prism-wiki.min.js
│   ├── prism-yaml.js
│   └── prism-yaml.min.js
├── components.js
├── examples
├── examples.js
├── gulpfile.js
├── package.json
├── plugins
│   ├── autolinker
│   │   ├── prism-autolinker.css
│   │   ├── prism-autolinker.js
│   │   └── prism-autolinker.min.js
│   ├── autoloader
│   │   ├── prism-autoloader.js
│   │   └── prism-autoloader.min.js
│   ├── command-line
│   │   ├── prism-command-line.css
│   │   ├── prism-command-line.js
│   │   └── prism-command-line.min.js
│   ├── file-highlight
│   │   ├── prism-file-highlight.js
│   │   └── prism-file-highlight.min.js
│   ├── highlight-keywords
│   │   ├── prism-highlight-keywords.js
│   │   └── prism-highlight-keywords.min.js
│   ├── ie8
│   │   ├── prism-ie8.css
│   │   ├── prism-ie8.js
│   │   └── prism-ie8.min.js
│   ├── jsonp-highlight
│   │   ├── prism-jsonp-highlight.js
│   │   └── prism-jsonp-highlight.min.js
│   ├── keep-markup
│   │   ├── prism-keep-markup.js
│   │   └── prism-keep-markup.min.js
│   ├── line-highlight
│   │   ├── prism-line-highlight.css
│   │   ├── prism-line-highlight.js
│   │   └── prism-line-highlight.min.js
│   ├── line-numbers
│   │   ├── prism-line-numbers.css
│   │   ├── prism-line-numbers.js
│   │   └── prism-line-numbers.min.js
│   ├── normalize-whitespace
│   │   ├── prism-normalize-whitespace.js
│   │   └── prism-normalize-whitespace.min.js
│   ├── previewer-angle
│   │   ├── prism-previewer-angle.css
│   │   ├── prism-previewer-angle.js
│   │   └── prism-previewer-angle.min.js
│   ├── previewer-base
│   │   ├── prism-previewer-base.css
│   │   ├── prism-previewer-base.js
│   │   └── prism-previewer-base.min.js
│   ├── previewer-color
│   │   ├── prism-previewer-color.css
│   │   ├── prism-previewer-color.js
│   │   └── prism-previewer-color.min.js
│   ├── previewer-easing
│   │   ├── prism-previewer-easing.css
│   │   ├── prism-previewer-easing.js
│   │   └── prism-previewer-easing.min.js
│   ├── previewer-gradient
│   │   ├── prism-previewer-gradient.css
│   │   ├── prism-previewer-gradient.js
│   │   └── prism-previewer-gradient.min.js
│   ├── previewer-time
│   │   ├── prism-previewer-time.css
│   │   ├── prism-previewer-time.js
│   │   └── prism-previewer-time.min.js
│   ├── remove-initial-line-feed
│   │   ├── prism-remove-initial-line-feed.js
│   │   └── prism-remove-initial-line-feed.min.js
│   ├── show-invisibles
│   │   ├── prism-show-invisibles.css
│   │   ├── prism-show-invisibles.js
│   │   └── prism-show-invisibles.min.js
│   ├── show-language
│   │   ├── prism-show-language.css
│   │   ├── prism-show-language.js
│   │   └── prism-show-language.min.js
│   ├── unescaped-markup
│   │   ├── prism-unescaped-markup.css
│   │   ├── prism-unescaped-markup.js
│   │   └── prism-unescaped-markup.min.js
│   └── wpd
│       ├── prism-wpd.css
│       ├── prism-wpd.js
│       └── prism-wpd.min.js
├── prism.js
├── themes
│   ├── prism-coy.css
│   ├── prism-dark.css
│   ├── prism-funky.css
│   ├── prism-okaidia.css
│   ├── prism-solarizedlight.css
│   ├── prism-tomorrow.css
│   ├── prism-twilight.css
│   └── prism.css
└── vendor
    └── promise.js

说明:

components目录下都是一些JavaScript源文件,这些文件的文件名很有规律:prism-语言.jsprism-语言.min.js, 从文件名可以猜测出,是对支持的语言的处理。其中带有min字样的是压缩版本。

themes目录下都是一些CSS文件,我们可以选择其中一个引入。

prism.js也是需要引入的文件。

1.3、增加语言支持

我们看到,虽然components目录中提供了非常多的语言支持, 但实际上,为了让开发者根据需要加载语言处理,默认的,只支持HTMLCSSJavaScript这三种语法高亮。 如果想使用其他的语言的高亮功能,就需要将components目录下的对应语言的js文件的内容追加到prism.js中即可。

1.4、使用
<!DOCTYPE html>
<html>
<head>
	...
</head>
<body>
    ...
    <pre><code class="language-css">p { color: red }</code></pre>
    <pre><code class="language-javascript">function foo() { }</code></pre>
	...
</body>
</html>

code元素上,使用language-xx样式即可。

如果想修改样式,比如代码块的背景颜色等,不要直接修改themes/prism.css文件,而应该采用覆盖样式的办法,因为你直接修改了themes/prism.css文件, 以后更新该库之后,你的修改都会丢失。那就麻烦了。