gtibook 插件 代码块(2)

简介: gtibook 插件 代码块(2)

5. prism-themes 插件

当使用gitbook-plugin-prism时,prism-themes 插件提供了额外的主题。

5.1 安装

npm i gitbook-plugin-prism-themes

或者

gitbook install

5.2 配置

{
  "plugins": ["-highlight", "prism", "prism-themes"]
}
"pluginsConfig": {  
  "prism": {
    "css": [
      "prism-themes/themes/prism-duotone-dark.css"
    ]
  }
}

5.3 效果

6. ACE 插件

ACE插件是使 GitBook 支持ace

6.1 安装

npm i gitbook-plugin-ace

6.2 配置

默认情况下,line-height 为 1,会使代码显得比较挤,而作者好像没提供修改行高的选项,如果需要修改行高,可以到 node_modules -> github-plugin-ace -> assets -> ace.js 中加入下面两行代码 (30 行左右的位置):

editor.container.style.lineHeight = 1.25;
editor.renderer.updateFontSize();

不过上面的做法有个问题就是,每次使用 gitbook install 安装新的插件之后,代码又会重置为原来的样子。另外可以在 website.css 中加入下面的 css 代码来指定 ace 字体的大小

.aceCode {
  font-size: 14px !important;
}

使用插件:

"plugins": [
    "ace"
]

使用示例:

// This is a hello world program for C.
#include <stdio.h>
int main(){
  printf("Hello World!");
  return 1;
}

6.3 效果

7. Terminal 插件

Terminal 插件功能是模拟终端显示,主要用于显示命令以及多行输出,不过写起来有些麻烦。

7.1 安装

npm i gitbook-plugin-terminal

7.2 配置

terminal 支持下面 5 种样式,如果需要更换样式,在 pluginsConfig 里配置即可。


black: Just that good old black terminal everybody loves.

classic: Looking for green color font over a black background? This is for you.

flat: Oh, flat colors. I love flat colors. Everything looks modern with them.

ubuntu: Admit it or not, but Ubuntu have a good looking terminal.

white: Make your terminal to blend in with your GitBook.

book.json配置:

{
    "plugins": [
        "terminal"
    ],
    "pluginsConfig": {
        "terminal": {
            "copyButtons": true,
            "fade": false,
            "style": "flat"
        }
    }
}

现在支持 6 种标签:

command: Command "executed" in the terminal.
delimiter: Sequence of characters between the prompt and the command.
error: Error message.
path: Directory path shown in the prompt.
prompt: Prompt of the user.
warning: Warning message.

标签的使用格式如下所示:

**[<tag_name> 内容]

为了使标签正常工作,需要在代码块的第一行加入 **[termial] 标记,下面是一个完整的示例:

**[terminal]
**[prompt foo@joe]**[path ~]**[delimiter  $ ]**[command ./myscript]
Normal output line. Nothing special here...
But...
You can add some colors. What about a warning message?
**[warning [WARNING] The color depends on the theme. Could look normal too]
What about an error message?
**[error [ERROR] This is not the error you are looking for]

7.3 效果

8. codesnippet 插件

codesnippet 插件可以轻松导入代码文件或在 GitBook 的代码块中使用变量。

8.1 安装

npm i gitbook-plugin-codesnippet

8.2 配置

{
    "plugins": ["codesnippet"]
}

8.3 语法

添加代码内容:
This is a code snippet:
{% codesnippet "./myfile.js" %}{% endcodesnippet %}

指定语言类型:

This is a code snippet, display as HTML:
{% codesnippet "./myfile.ejs", language="html" %}{% endcodesnippet %}

带有模板语法的代码块

This is a code snippet, display as HTML:
{% codesnippet %}
curl {{ book.hostname|d("http://localhost") }}/myapi
{% endcodesnippet %}

8.4 效果

(略)

8.5 评价

很方便,但用处不太大,略感繁琐。

综合指数:⭐️⭐️⭐️

相关文章
|
1月前
|
JavaScript 前端开发 算法
JavaScript 关键字 debugger 的作用和使用场景介绍
JavaScript 关键字 debugger 的作用和使用场景介绍
53 0
|
1月前
|
JavaScript 前端开发
变量提升:JavaScript代码是按顺序执行的吗?
变量提升:JavaScript代码是按顺序执行的吗?
30 0
|
1月前
|
JavaScript
【TypeScript】一直提示 :无法重新声明块范围变量
【TypeScript】一直提示 :无法重新声明块范围变量
【TypeScript】一直提示 :无法重新声明块范围变量
|
6月前
|
Apache
hooks为什么不能在条件语句中使用,如果修改源码,怎么能让它支持条件语句?
hooks为什么不能在条件语句中使用,如果修改源码,怎么能让它支持条件语句?
53 1
|
8月前
|
前端开发
|
8月前
|
JavaScript 前端开发
JavaScript作用域和变量的使用规则简述
JavaScript作用域和变量的使用规则简述
|
前端开发 JavaScript IDE
gtibook 插件 代码块(1)
gtibook 插件 代码块(1)
gtibook 插件 代码块(1)
|
JavaScript 前端开发
JavaScript 代码结构:语句、分号和注释
JavaScript 代码结构:语句、分号和注释
148 0
JavaScript 代码结构:语句、分号和注释
idea中设置自定义代码块
idea中设置自定义代码块
333 0
idea中设置自定义代码块

热门文章

最新文章