使用 Prism.js 实现漂亮的代码语法高亮
陶泳
-
简介
Prism 是一款轻量、可扩展的代码语法高亮库，使用现代化的 Web 标准构建。 -
为什么选择 Prism.js ？
-
极致易用
引用 prism.css 和 prism.js，使用合适的 HTML5 标签（code.language-xxxx），搞定！ -
天生伶俐
语言的 CSS 类是可继承的，所以你只需定义一次就能应用到多个代码片段。 -
轻如鸿毛
代码压缩后只有 1.6KB。每添加一个语言平均增加 0.3-0.5KB，主题在 1KB 左右。 -
快如闪电
如果可能，支持通过 Web Workers 实现并行。 -
轻松扩展
定义新语言或扩展现有语法，或者新增功能都非常简单。 -
丰富样式
所有的样式通过 CSS 完成，并使用合理的类名如：.comment, .string, .property 等。
-
-
下载地址
- 官网地址
http://prismjs.com/download.html - BootCDN 地址
https://www.bootcdn.cn/prism/1.15.0/
- 官网地址
-
使用教程
line-numbers便是显示行号，language-markup就是语言。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Prism 代码语法高亮</title>
<link href="https://cdn.bootcss.com/prism/1.15.0/themes/prism.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/prism/1.15.0/plugins/line-numbers/prism-line-numbers.css" rel="stylesheet">
<!-- <link href="https://cdn.bootcss.com/prism/1.15.0/themes/prism-okaidia.css" rel="stylesheet"> -->
<style>
#box {
width: 60%;
margin-left: 35px;
}
</style>
</head>
<body>
<div id="box">
<h3>css显示:</h3>
<pre class="line-numbers"><code class="language-css">p { color: red }
</code></pre>
<h3>js显示:</h3>
<pre class="line-numbers"><code class="language-js">require("lib/ace"); ##引入
editor.setTheme("ace/theme/solarized_dark");##设置模theme-solarized_dark.js模板文件
editor.getSession().setMode("ace/mode/javascript"); ##设置程序语言模式
editor.setValue("the new text here");##设置内容
editor.getValue(); ##取值</code></pre>
<h3>java显示:</h3>
<pre class="line-numbers"><code class="language-java">String res=new ShowApiRequest("http://route.showapi.com/213-4","my_appI"my_appSecret")
.addTextPara("topid","5")
.post();
System.out.println(res);
</code></pre>
<h3>html显示:</h3>
<pre class="line-numbers"><code id="code-1" class="language-html"></code></pre>
<pre class="line-numbers"><code id="code-2" class="language-html"><p>data-foo</p>
<p>数据绑定</p></code></pre>
</div>
<script src="https://cdn.bootcss.com/prism/1.15.0/prism.js"></script>
<script src="https://cdn.bootcss.com/prism/1.15.0/components/prism-java.js"></script>
<script src="https://cdn.bootcss.com/prism/1.15.0/plugins/line-numbers/prism-line-numbers.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script>
var text =
'<link href="https://cdn.bootcss.com/prism/1.15.0/themes/prism.css" rel="stylesheet">\n' + '<p>js操作html数据绑定</p>';
var text = $('#code-1').text(text)
console.log($('#code-1').text());
</script>
</body>
</html>
- 支持的语言
Markup - markup
CSS - css
C-like - clike
JavaScript - javascript
ABAP - abap
ActionScript - actionscript
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
Diff - diff
Docker - docker
Eiffel - eiffel
Elixir - elixir
Erlang - erlang
F# - fsharp
Fortran - fortran
Gherkin - gherkin
Git - git
GLSL - glsl
Go - go
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
JSON - json
Julia - julia
Keyman - keyman
Kotlin - kotlin
LaTeX - latex
Less - less
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
Protocol Buffers - protobuf
Puppet - puppet
Pure - pure
Python - python
Q - q
Qore - qore
R - r
React JSX - jsx
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
YAML - yaml
- 插件-plugins
插件是扩展Prism功能的附加脚本（和CSS代码）。
- 线条突出显示 - Line Highlight
- 行号 - Line Numbers
- 显示隐形 - Show Invisibles
- Autolinker - Autolinker
- Web平台文档 - WebPlatform Docs
- 自定义类 - Custom Class
- 文件突出显示 - File Highlight
- 显示语言 - Show Language
- JSONP亮点 - JSONP Highlight
- 突出显示关键字 - Highlight Keywords
- 删除初始换行符 - Remove initial line feed
- 预览器 - Previewers
- 自动加载磁带机 - Autoloader
- 保持标记 - Keep Markup
- 命令行 - Command Line
- 非转义标记 - Unescaped Markup
- 规范化空白 - Normalize Whitespace
- 数据URI突出显示 - Data-URI Highlight
- 工具栏 - Toolbar
- 复制到剪贴板按钮 - Copy to Clipboard Button
类似资料：