1. 描述

2. 插件地址

https://www.npmjs.com/package/gitbook-plugin-popup

3. 插件引用

{
    "plugins": ["popup"]
}

4. 引用方法

不需要引用

效果

prism代码区域风格效果在book.json里指定

"prism": {
    "css": [
        "prismjs/themes/prism-okaidia.css"                
    ]
},

prism支持的效果列表如下

$ ll node_modules/prismjs/themes/prism*
node_modules/prismjs/themes/prism-coy.css
node_modules/prismjs/themes/prism.css
node_modules/prismjs/themes/prism-dark.css
node_modules/prismjs/themes/prism-funky.css
node_modules/prismjs/themes/prism-okaidia.css
node_modules/prismjs/themes/prism-solarizedlight.css
node_modules/prismjs/themes/prism-tomorrow.css
node_modules/prismjs/themes/prism-twilight.css

每个效果的风格可以从prism官网看到效果

default

dark

funky

okaidia

twilight

coy

solarizedlight

tomorrowlight

5. 附录

5.1. 支持的语言列表

运行如下命令

ls node_modules/prismjs/components/prism-*

输出结果

node_modules/prismjs/components/prism-abap.js
node_modules/prismjs/components/prism-abap.min.js
node_modules/prismjs/components/prism-abnf.js
node_modules/prismjs/components/prism-abnf.min.js
node_modules/prismjs/components/prism-actionscript.js
node_modules/prismjs/components/prism-actionscript.min.js
node_modules/prismjs/components/prism-ada.js
node_modules/prismjs/components/prism-ada.min.js
node_modules/prismjs/components/prism-apacheconf.js
node_modules/prismjs/components/prism-apacheconf.min.js
node_modules/prismjs/components/prism-apl.js
node_modules/prismjs/components/prism-apl.min.js
node_modules/prismjs/components/prism-applescript.js
node_modules/prismjs/components/prism-applescript.min.js
node_modules/prismjs/components/prism-arduino.js
node_modules/prismjs/components/prism-arduino.min.js
node_modules/prismjs/components/prism-arff.js
node_modules/prismjs/components/prism-arff.min.js
node_modules/prismjs/components/prism-asciidoc.js
node_modules/prismjs/components/prism-asciidoc.min.js
node_modules/prismjs/components/prism-asm6502.js
node_modules/prismjs/components/prism-asm6502.min.js
node_modules/prismjs/components/prism-aspnet.js
node_modules/prismjs/components/prism-aspnet.min.js
node_modules/prismjs/components/prism-autohotkey.js
node_modules/prismjs/components/prism-autohotkey.min.js
node_modules/prismjs/components/prism-autoit.js
node_modules/prismjs/components/prism-autoit.min.js
node_modules/prismjs/components/prism-bash.js
node_modules/prismjs/components/prism-bash.min.js
node_modules/prismjs/components/prism-basic.js
node_modules/prismjs/components/prism-basic.min.js
node_modules/prismjs/components/prism-batch.js
node_modules/prismjs/components/prism-batch.min.js
node_modules/prismjs/components/prism-bison.js
node_modules/prismjs/components/prism-bison.min.js
node_modules/prismjs/components/prism-bnf.js
node_modules/prismjs/components/prism-bnf.min.js
node_modules/prismjs/components/prism-brainfuck.js
node_modules/prismjs/components/prism-brainfuck.min.js
node_modules/prismjs/components/prism-bro.js
node_modules/prismjs/components/prism-bro.min.js
node_modules/prismjs/components/prism-cil.js
node_modules/prismjs/components/prism-cil.min.js
node_modules/prismjs/components/prism-c.js
node_modules/prismjs/components/prism-clike.js
node_modules/prismjs/components/prism-clike.min.js
node_modules/prismjs/components/prism-clojure.js
node_modules/prismjs/components/prism-clojure.min.js
node_modules/prismjs/components/prism-cmake.js
node_modules/prismjs/components/prism-cmake.min.js
node_modules/prismjs/components/prism-c.min.js
node_modules/prismjs/components/prism-coffeescript.js
node_modules/prismjs/components/prism-coffeescript.min.js
node_modules/prismjs/components/prism-core.js
node_modules/prismjs/components/prism-core.min.js
node_modules/prismjs/components/prism-cpp.js
node_modules/prismjs/components/prism-cpp.min.js
node_modules/prismjs/components/prism-crystal.js
node_modules/prismjs/components/prism-crystal.min.js
node_modules/prismjs/components/prism-csharp.js
node_modules/prismjs/components/prism-csharp.min.js
node_modules/prismjs/components/prism-csp.js
node_modules/prismjs/components/prism-csp.min.js
node_modules/prismjs/components/prism-css-extras.js
node_modules/prismjs/components/prism-css-extras.min.js
node_modules/prismjs/components/prism-css.js
node_modules/prismjs/components/prism-css.min.js
node_modules/prismjs/components/prism-dart.js
node_modules/prismjs/components/prism-dart.min.js
node_modules/prismjs/components/prism-diff.js
node_modules/prismjs/components/prism-diff.min.js
node_modules/prismjs/components/prism-django.js
node_modules/prismjs/components/prism-django.min.js
node_modules/prismjs/components/prism-d.js
node_modules/prismjs/components/prism-d.min.js
node_modules/prismjs/components/prism-dns-zone-file.js
node_modules/prismjs/components/prism-dns-zone-file.min.js
node_modules/prismjs/components/prism-docker.js
node_modules/prismjs/components/prism-docker.min.js
node_modules/prismjs/components/prism-ebnf.js
node_modules/prismjs/components/prism-ebnf.min.js
node_modules/prismjs/components/prism-eiffel.js
node_modules/prismjs/components/prism-eiffel.min.js
node_modules/prismjs/components/prism-ejs.js
node_modules/prismjs/components/prism-ejs.min.js
node_modules/prismjs/components/prism-elixir.js
node_modules/prismjs/components/prism-elixir.min.js
node_modules/prismjs/components/prism-elm.js
node_modules/prismjs/components/prism-elm.min.js
node_modules/prismjs/components/prism-erb.js
node_modules/prismjs/components/prism-erb.min.js
node_modules/prismjs/components/prism-erlang.js
node_modules/prismjs/components/prism-erlang.min.js
node_modules/prismjs/components/prism-flow.js
node_modules/prismjs/components/prism-flow.min.js
node_modules/prismjs/components/prism-fortran.js
node_modules/prismjs/components/prism-fortran.min.js
node_modules/prismjs/components/prism-fsharp.js
node_modules/prismjs/components/prism-fsharp.min.js
node_modules/prismjs/components/prism-gcode.js
node_modules/prismjs/components/prism-gcode.min.js
node_modules/prismjs/components/prism-gedcom.js
node_modules/prismjs/components/prism-gedcom.min.js
node_modules/prismjs/components/prism-gherkin.js
node_modules/prismjs/components/prism-gherkin.min.js
node_modules/prismjs/components/prism-git.js
node_modules/prismjs/components/prism-git.min.js
node_modules/prismjs/components/prism-glsl.js
node_modules/prismjs/components/prism-glsl.min.js
node_modules/prismjs/components/prism-gml.js
node_modules/prismjs/components/prism-gml.min.js
node_modules/prismjs/components/prism-go.js
node_modules/prismjs/components/prism-go.min.js
node_modules/prismjs/components/prism-graphql.js
node_modules/prismjs/components/prism-graphql.min.js
node_modules/prismjs/components/prism-groovy.js
node_modules/prismjs/components/prism-groovy.min.js
node_modules/prismjs/components/prism-haml.js
node_modules/prismjs/components/prism-haml.min.js
node_modules/prismjs/components/prism-handlebars.js
node_modules/prismjs/components/prism-handlebars.min.js
node_modules/prismjs/components/prism-haskell.js
node_modules/prismjs/components/prism-haskell.min.js
node_modules/prismjs/components/prism-haxe.js
node_modules/prismjs/components/prism-haxe.min.js
node_modules/prismjs/components/prism-hcl.js
node_modules/prismjs/components/prism-hcl.min.js
node_modules/prismjs/components/prism-hpkp.js
node_modules/prismjs/components/prism-hpkp.min.js
node_modules/prismjs/components/prism-hsts.js
node_modules/prismjs/components/prism-hsts.min.js
node_modules/prismjs/components/prism-http.js
node_modules/prismjs/components/prism-http.min.js
node_modules/prismjs/components/prism-ichigojam.js
node_modules/prismjs/components/prism-ichigojam.min.js
node_modules/prismjs/components/prism-icon.js
node_modules/prismjs/components/prism-icon.min.js
node_modules/prismjs/components/prism-inform7.js
node_modules/prismjs/components/prism-inform7.min.js
node_modules/prismjs/components/prism-ini.js
node_modules/prismjs/components/prism-ini.min.js
node_modules/prismjs/components/prism-io.js
node_modules/prismjs/components/prism-io.min.js
node_modules/prismjs/components/prism-javadoc.js
node_modules/prismjs/components/prism-javadoclike.js
node_modules/prismjs/components/prism-javadoclike.min.js
node_modules/prismjs/components/prism-javadoc.min.js
node_modules/prismjs/components/prism-java.js
node_modules/prismjs/components/prism-java.min.js
node_modules/prismjs/components/prism-javascript.js
node_modules/prismjs/components/prism-javascript.min.js
node_modules/prismjs/components/prism-javastacktrace.js
node_modules/prismjs/components/prism-javastacktrace.min.js
node_modules/prismjs/components/prism-j.js
node_modules/prismjs/components/prism-j.min.js
node_modules/prismjs/components/prism-jolie.js
node_modules/prismjs/components/prism-jolie.min.js
node_modules/prismjs/components/prism-jq.js
node_modules/prismjs/components/prism-jq.min.js
node_modules/prismjs/components/prism-jsdoc.js
node_modules/prismjs/components/prism-jsdoc.min.js
node_modules/prismjs/components/prism-js-extras.js
node_modules/prismjs/components/prism-js-extras.min.js
node_modules/prismjs/components/prism-json5.js
node_modules/prismjs/components/prism-json5.min.js
node_modules/prismjs/components/prism-json.js
node_modules/prismjs/components/prism-json.min.js
node_modules/prismjs/components/prism-jsonp.js
node_modules/prismjs/components/prism-jsonp.min.js
node_modules/prismjs/components/prism-js-templates.js
node_modules/prismjs/components/prism-js-templates.min.js
node_modules/prismjs/components/prism-jsx.js
node_modules/prismjs/components/prism-jsx.min.js
node_modules/prismjs/components/prism-julia.js
node_modules/prismjs/components/prism-julia.min.js
node_modules/prismjs/components/prism-keyman.js
node_modules/prismjs/components/prism-keyman.min.js
node_modules/prismjs/components/prism-kotlin.js
node_modules/prismjs/components/prism-kotlin.min.js
node_modules/prismjs/components/prism-latex.js
node_modules/prismjs/components/prism-latex.min.js
node_modules/prismjs/components/prism-less.js
node_modules/prismjs/components/prism-less.min.js
node_modules/prismjs/components/prism-lilypond.js
node_modules/prismjs/components/prism-lilypond.min.js
node_modules/prismjs/components/prism-liquid.js
node_modules/prismjs/components/prism-liquid.min.js
node_modules/prismjs/components/prism-lisp.js
node_modules/prismjs/components/prism-lisp.min.js
node_modules/prismjs/components/prism-livescript.js
node_modules/prismjs/components/prism-livescript.min.js
node_modules/prismjs/components/prism-lolcode.js
node_modules/prismjs/components/prism-lolcode.min.js
node_modules/prismjs/components/prism-lua.js
node_modules/prismjs/components/prism-lua.min.js
node_modules/prismjs/components/prism-makefile.js
node_modules/prismjs/components/prism-makefile.min.js
node_modules/prismjs/components/prism-markdown.js
node_modules/prismjs/components/prism-markdown.min.js
node_modules/prismjs/components/prism-markup.js
node_modules/prismjs/components/prism-markup.min.js
node_modules/prismjs/components/prism-markup-templating.js
node_modules/prismjs/components/prism-markup-templating.min.js
node_modules/prismjs/components/prism-matlab.js
node_modules/prismjs/components/prism-matlab.min.js
node_modules/prismjs/components/prism-mel.js
node_modules/prismjs/components/prism-mel.min.js
node_modules/prismjs/components/prism-mizar.js
node_modules/prismjs/components/prism-mizar.min.js
node_modules/prismjs/components/prism-monkey.js
node_modules/prismjs/components/prism-monkey.min.js
node_modules/prismjs/components/prism-n1ql.js
node_modules/prismjs/components/prism-n1ql.min.js
node_modules/prismjs/components/prism-n4js.js
node_modules/prismjs/components/prism-n4js.min.js
node_modules/prismjs/components/prism-nand2tetris-hdl.js
node_modules/prismjs/components/prism-nand2tetris-hdl.min.js
node_modules/prismjs/components/prism-nasm.js
node_modules/prismjs/components/prism-nasm.min.js
node_modules/prismjs/components/prism-nginx.js
node_modules/prismjs/components/prism-nginx.min.js
node_modules/prismjs/components/prism-nim.js
node_modules/prismjs/components/prism-nim.min.js
node_modules/prismjs/components/prism-nix.js
node_modules/prismjs/components/prism-nix.min.js
node_modules/prismjs/components/prism-nsis.js
node_modules/prismjs/components/prism-nsis.min.js
node_modules/prismjs/components/prism-objectivec.js
node_modules/prismjs/components/prism-objectivec.min.js
node_modules/prismjs/components/prism-ocaml.js
node_modules/prismjs/components/prism-ocaml.min.js
node_modules/prismjs/components/prism-opencl.js
node_modules/prismjs/components/prism-opencl.min.js
node_modules/prismjs/components/prism-oz.js
node_modules/prismjs/components/prism-oz.min.js
node_modules/prismjs/components/prism-parigp.js
node_modules/prismjs/components/prism-parigp.min.js
node_modules/prismjs/components/prism-parser.js
node_modules/prismjs/components/prism-parser.min.js
node_modules/prismjs/components/prism-pascaligo.js
node_modules/prismjs/components/prism-pascaligo.min.js
node_modules/prismjs/components/prism-pascal.js
node_modules/prismjs/components/prism-pascal.min.js
node_modules/prismjs/components/prism-pcaxis.js
node_modules/prismjs/components/prism-pcaxis.min.js
node_modules/prismjs/components/prism-perl.js
node_modules/prismjs/components/prism-perl.min.js
node_modules/prismjs/components/prism-phpdoc.js
node_modules/prismjs/components/prism-phpdoc.min.js
node_modules/prismjs/components/prism-php-extras.js
node_modules/prismjs/components/prism-php-extras.min.js
node_modules/prismjs/components/prism-php.js
node_modules/prismjs/components/prism-php.min.js
node_modules/prismjs/components/prism-plsql.js
node_modules/prismjs/components/prism-plsql.min.js
node_modules/prismjs/components/prism-powershell.js
node_modules/prismjs/components/prism-powershell.min.js
node_modules/prismjs/components/prism-processing.js
node_modules/prismjs/components/prism-processing.min.js
node_modules/prismjs/components/prism-prolog.js
node_modules/prismjs/components/prism-prolog.min.js
node_modules/prismjs/components/prism-properties.js
node_modules/prismjs/components/prism-properties.min.js
node_modules/prismjs/components/prism-protobuf.js
node_modules/prismjs/components/prism-protobuf.min.js
node_modules/prismjs/components/prism-pug.js
node_modules/prismjs/components/prism-pug.min.js
node_modules/prismjs/components/prism-puppet.js
node_modules/prismjs/components/prism-puppet.min.js
node_modules/prismjs/components/prism-pure.js
node_modules/prismjs/components/prism-pure.min.js
node_modules/prismjs/components/prism-python.js
node_modules/prismjs/components/prism-python.min.js
node_modules/prismjs/components/prism-q.js
node_modules/prismjs/components/prism-q.min.js
node_modules/prismjs/components/prism-qore.js
node_modules/prismjs/components/prism-qore.min.js
node_modules/prismjs/components/prism-reason.js
node_modules/prismjs/components/prism-reason.min.js
node_modules/prismjs/components/prism-regex.js
node_modules/prismjs/components/prism-regex.min.js
node_modules/prismjs/components/prism-renpy.js
node_modules/prismjs/components/prism-renpy.min.js
node_modules/prismjs/components/prism-rest.js
node_modules/prismjs/components/prism-rest.min.js
node_modules/prismjs/components/prism-rip.js
node_modules/prismjs/components/prism-rip.min.js
node_modules/prismjs/components/prism-r.js
node_modules/prismjs/components/prism-r.min.js
node_modules/prismjs/components/prism-roboconf.js
node_modules/prismjs/components/prism-roboconf.min.js
node_modules/prismjs/components/prism-ruby.js
node_modules/prismjs/components/prism-ruby.min.js
node_modules/prismjs/components/prism-rust.js
node_modules/prismjs/components/prism-rust.min.js
node_modules/prismjs/components/prism-sas.js
node_modules/prismjs/components/prism-sas.min.js
node_modules/prismjs/components/prism-sass.js
node_modules/prismjs/components/prism-sass.min.js
node_modules/prismjs/components/prism-scala.js
node_modules/prismjs/components/prism-scala.min.js
node_modules/prismjs/components/prism-scheme.js
node_modules/prismjs/components/prism-scheme.min.js
node_modules/prismjs/components/prism-scss.js
node_modules/prismjs/components/prism-scss.min.js
node_modules/prismjs/components/prism-shell-session.js
node_modules/prismjs/components/prism-shell-session.min.js
node_modules/prismjs/components/prism-smalltalk.js
node_modules/prismjs/components/prism-smalltalk.min.js
node_modules/prismjs/components/prism-smarty.js
node_modules/prismjs/components/prism-smarty.min.js
node_modules/prismjs/components/prism-soy.js
node_modules/prismjs/components/prism-soy.min.js
node_modules/prismjs/components/prism-splunk-spl.js
node_modules/prismjs/components/prism-splunk-spl.min.js
node_modules/prismjs/components/prism-sql.js
node_modules/prismjs/components/prism-sql.min.js
node_modules/prismjs/components/prism-stylus.js
node_modules/prismjs/components/prism-stylus.min.js
node_modules/prismjs/components/prism-swift.js
node_modules/prismjs/components/prism-swift.min.js
node_modules/prismjs/components/prism-t4-cs.js
node_modules/prismjs/components/prism-t4-cs.min.js
node_modules/prismjs/components/prism-t4-templating.js
node_modules/prismjs/components/prism-t4-templating.min.js
node_modules/prismjs/components/prism-t4-vb.js
node_modules/prismjs/components/prism-t4-vb.min.js
node_modules/prismjs/components/prism-tap.js
node_modules/prismjs/components/prism-tap.min.js
node_modules/prismjs/components/prism-tcl.js
node_modules/prismjs/components/prism-tcl.min.js
node_modules/prismjs/components/prism-textile.js
node_modules/prismjs/components/prism-textile.min.js
node_modules/prismjs/components/prism-toml.js
node_modules/prismjs/components/prism-toml.min.js
node_modules/prismjs/components/prism-tsx.js
node_modules/prismjs/components/prism-tsx.min.js
node_modules/prismjs/components/prism-tt2.js
node_modules/prismjs/components/prism-tt2.min.js
node_modules/prismjs/components/prism-twig.js
node_modules/prismjs/components/prism-twig.min.js
node_modules/prismjs/components/prism-typescript.js
node_modules/prismjs/components/prism-typescript.min.js
node_modules/prismjs/components/prism-vala.js
node_modules/prismjs/components/prism-vala.min.js
node_modules/prismjs/components/prism-vbnet.js
node_modules/prismjs/components/prism-vbnet.min.js
node_modules/prismjs/components/prism-velocity.js
node_modules/prismjs/components/prism-velocity.min.js
node_modules/prismjs/components/prism-verilog.js
node_modules/prismjs/components/prism-verilog.min.js
node_modules/prismjs/components/prism-vhdl.js
node_modules/prismjs/components/prism-vhdl.min.js
node_modules/prismjs/components/prism-vim.js
node_modules/prismjs/components/prism-vim.min.js
node_modules/prismjs/components/prism-visual-basic.js
node_modules/prismjs/components/prism-visual-basic.min.js
node_modules/prismjs/components/prism-wasm.js
node_modules/prismjs/components/prism-wasm.min.js
node_modules/prismjs/components/prism-wiki.js
node_modules/prismjs/components/prism-wiki.min.js
node_modules/prismjs/components/prism-xeora.js
node_modules/prismjs/components/prism-xeora.min.js
node_modules/prismjs/components/prism-xojo.js
node_modules/prismjs/components/prism-xojo.min.js
node_modules/prismjs/components/prism-xquery.js
node_modules/prismjs/components/prism-xquery.min.js
node_modules/prismjs/components/prism-yaml.js
node_modules/prismjs/components/prism-yaml.min.js

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