Prism轻量级原生JavaScript语法高亮插件

Question

说到语法高亮，很多做技术出身的博主应该不陌生，就是对特定的关键词使用不同的颜色，让我们能够更加清晰的看懂代码，可以说语法高亮是技术类博客的标配，让代码看起来更优雅。

Prism介绍

Prism 是一个轻量级并且简单易用的 JavaScript 类库，压缩版本只有 1.5kb 大小左右，即使添加了语言定义的CSS代码文件，最大也不会超过 2kb，是我目前使用过的最小的代码高亮 JavaScript 类库。

Prism 使用非常简单，只需添加 Javascript 和 CSS 就能够轻易的将其整合进项目中使用。目前它已内置了 HTML\CSS\Javascript 三种语言的高亮支持，你也可以添加新的语法高亮配置文件，只需修改 Javascipt 和 CSS 文件就行。除此之外，它也提供了额外的插件功能，让你可以新增其它功能，比如自动转换链接等，你也可以自己撰写插件。

目前 Prism 唯一的缺点就是不支持 IE8，看作者的博客介绍，也不想支持 IE8。

使用Prism

1、首先在页面的 head 中引入 Prism 的 CSS 样式文件

<link href="prism.css" rel="stylesheet" />

2、然后在 </body> 标签之前引入 Prism 类库：

<script src="prism.min.js"></script>

3、添加要高亮显示的代码，要放在 pre 标签中，设置 code 标签的样式类型为代码的类别，如下：

<pre><code class="language-css">p { color: red }</code></pre>

上面添加的 language-xxx 是需要代码高亮的类选择器，比如如果是PHP，那么就可以添加 language-php ，使用起来是不是很方便，详细的语言参数如下：

Markup - markup	CSS - css	C-like - clike
JavaScript - javascript	ABAP - abap	ActionScript - actionscript
Ada - ada	Apache Configuration - apacheconf	APL - apl
AppleScript - applescript	AsciiDoc - asciidoc	ASP.NET (C#) - aspnet
AutoIt - autoit	AutoHotkey - autohotkey	Bash - bash
BASIC - basic	Batch - batch	Bison - bison
Brainfuck - brainfuck	Bro - bro	C - c
C# - csharp	C++ - cpp	CoffeeScript - coffeescript
Crystal - crystal	CSS Extras - css-extras	D - d
Dart - dart	Django/Jinja2 - django	Diff - diff
Docker - docker	Eiffel - eiffel	Elixir - elixir
Erlang - erlang	F# - fsharp	Fortran - fortran
Gherkin - gherkin	Git - git	GLSL - glsl
Go - go	GraphQL - graphql	Groovy - groovy
Haml - haml	Handlebars - handlebars	Haskell - haskell
Haxe - haxe	HTTP - http	Icon - icon
Inform 7 - inform7	Ini - ini	J - j
Jade - jade	Java - java	Jolie - jolie
JSON - json	Julia - julia	Keyman - keyman
Kotlin - kotlin	LaTeX - latex	Less - less
LiveScript - livescript	LOLCODE - lolcode	Lua - lua
Makefile - makefile	Markdown - markdown	MATLAB - matlab
MEL - mel	Mizar - mizar	Monkey - monkey
NASM - nasm	nginx - nginx	Nim - nim
Nix - nix	NSIS - nsis	Objective-C - objectivec
OCaml - ocaml	Oz - oz	PARI/GP - parigp
Parser - parser	Pascal - pascal	Perl - perl
PHP - php	PHP Extras - php-extras	PowerShell - powershell
Processing - processing	Prolog - prolog	.properties - properties
Protocol Buffers - protobuf	Puppet - puppet	Pure - pure
Python - python	Q - q	Qore - qore
R - r	React JSX - jsx	Reason - reason
reST (reStructuredText) - rest	Rip - rip	Roboconf - roboconf
Ruby - ruby	Rust - rust	SAS - sas
Sass (Sass) - sass	Sass (Scss) - scss	Scala - scala
Scheme - scheme	Smalltalk - smalltalk	Smarty - smarty
SQL - sql	Stylus - stylus	Swift - swift
Tcl - tcl	Textile - textile	Twig - twig
TypeScript - typescript	Verilog - verilog	VHDL - vhdl
vim - vim	Wiki markup - wiki	Xojo (REALbasic) - xojo
YAML - yaml

相关链接

官网：http://prismjs.com/