是什么 ? | : | a lightweight, extensible syntax highlighter, built with modern web standards in mind. |
开发语言 | : | CSS、JavaScript |
官方主页 | : | http://prismjs.com |
源码仓库 | : | https://github.com/PrismJS/prism |
PrismJS
经过minified和gzipped压缩后只有1.5KB,即使添加语言定义代码,最大也不会超过2KB,是目前最小的代码高亮开源库。
通过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-语言.js
、prism-语言.min.js
, 从文件名可以猜测出,是对支持的语言的处理。其中带有min
字样的是压缩版本。
themes
目录下都是一些CSS文件,我们可以选择其中一个引入。
prism.js
也是需要引入的文件。
我们看到,虽然components
目录中提供了非常多的语言支持, 但实际上,为了让开发者根据需要加载语言处理,默认的,只支持HTML、CSS、JavaScript这三种语法高亮。 如果想使用其他的语言的高亮功能,就需要将components
目录下的对应语言的js文件的内容追加到prism.js
中即可。
<!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
文件, 以后更新该库之后,你的修改都会丢失。那就麻烦了。