代码块

文章目录

代码块

1. code 插件

1.1 安装

1.2 配置

1.3 效果

2. copy-code-button 插件

2.1 安装

2.2 配置

2.3 效果

3. klipse 插件

3.1 安装

3.2 方法

3.3 效果

4. Prism 插件

4.1 安装

4.2 配置

4.2.1 css

4.2.2 lang

4.2.3 ignore

4.3 效果

4.3.1 Prism Themes

4.3.2 Atelierbram Themes

5. prism-themes 插件

5.1 安装

5.2 配置

5.3 效果

6. ACE 插件

6.1 安装

6.2 配置

6.3 效果

7. Terminal 插件

7.1 安装

7.2 配置

7.3 效果

8. codesnippet 插件

8.1 安装

8.2 配置

8.3 语法

8.4 效果

8.5 评价

1. code 插件

code 代码添加行号&复制按钮

1.1 安装

npm i gitbook-plugin-code-pro

1.2 配置

book.json配置：

{
    "plugins" : [ "code" ]
}

如果想去掉复制按钮，可配置

"pluginsConfig": {
      "code": {
        "copyButtons": false
      }
}

1.3 效果

注意左侧行数编号和右上角的复制按钮

2. copy-code-button 插件

copy-code-button 插件功能是代码复制按钮

2.1 安装

npm i gitbook-plugin-copy-code-button

2.2 配置

{
    "plugins": ["copy-code-button"]
}

2.3 效果

3. klipse 插件

klipse 插件是嵌入类似IDE的功能

3.1 安装

npm i gitbook-plugin-klipse

3.2 方法

{
    "plugins": ["klipse"]
}

用法，在 markdown 中

print [x + 1 for x in range(10)]

3.3 效果

klipse 目前支持下面的语言：

javascript: evaluation is done with the javascript function eval and pretty printing of the result is done with pretty-format

clojure[script]: evaluation is done with Self-Hosted Clojurescript

ruby: evaluation is done with Opal

C++: evaluation is done with JSCPP

python: evaluation is done with Skulpt

scheme: evaluation is done with BiwasScheme

PHP: evaluation is done with Uniter

BrainFuck

JSX

EcmaScript2017

Google Charts: See Interactive Business Report with Google Charts.

4. Prism 插件

Prism 插件使用 Prism.js 为语法添加高亮显示，需要将 highlight 插件去掉。该插件自带的主题样式较少，可以再安装 prism-themes 插件，里面多提供了几种样式，具体的样式可以参考 这里，在设置样式时要注意设置 css 文件名，而不是样式名。

4.1 安装

npm i gitbook-plugin-prism

4.2 配置

{
    "plugins": [
        "prism",
        "-highlight"
    ]
}

4.2.1 css

覆盖默认样式。所有css文件必须位于同一个文件夹中。

"pluginsConfig": {
  "prism": {
    "css": [
      "prismjs/themes/prism-solarizedlight.css"
    ]
  }
}

4.2.2 lang

通过别名现有前缀来支持非标准语法前缀。

"pluginsConfig": {
  "prism": {
    "lang": {
      "flow": "typescript"
    }
  }
}

4.2.3 ignore

由于其他插件使用代码块的概念来表示其他功能，你可以忽略某些语言。

"pluginsConfig": {
  "prism": {
    "ignore": [
      "mermaid",
      "eval-js"
    ]
  }
}

4.3 效果

4.3.1 Prism Themes

https://github.com/PrismJS/prism

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

Okaidia prismjs/themes/prism-okaidia.css

Solarized Light prismjs/themes/prism-solarizedlight.css

Tomorrow prismjs/themes/prism-tomorrow.css

Dark prismjs/themes/prism-dark.css

Coy prismjs/themes/prism-coy.css

4.3.2 Atelierbram Themes

https://github.com/atelierbram/syntax-highlighting

Base16 Ocean Dark syntax-highlighting/assets/css/prism/prism-base16-ocean.dark.css

Google Light syntax-highlighting/assets/css/prism/prism-base16-google.light.css

Xonokai syntax-highlighting/assets/css/prism/prism-xonokai.css