gtibook 插件 代码块
代码块
文章目录
- 代码块
- 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
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 效果
- Available themes
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 "./myfile.ejs", lines="2:5" %}{% endcodesnippet %}
带有模板语法的代码块
This is a code snippet, display as HTML:{% codesnippet %}
curl {{ book.hostname|d("http://localhost") }}/myapi
{% endcodesnippet %}
8.4 效果
(略)
8.5 评价
很方便,但用处不太大,略感繁琐。
综合指数:⭐️⭐️⭐️
gtibook 插件 代码块相关推荐
- 【Android Gradle 插件】Module 目录下 build.gradle 配置文件 ( plugins 闭包代码块中引入插件 | PluginAware#apply 方法引入插件 )
文章目录 一.Module 目录下 build.gradle 配置文件 1.plugins 闭包代码块中引入插件 2.PluginAware#apply 方法引入插件 Android Plugin D ...
- Vs code 进行硬件设计实用插件-语法高亮、语法检查、自动例化、Testbench生成、对齐、代码块等
目录 1. ISE.Vivado编辑器设置 1.1 ISE 设置 1.2 Vivado 设置 2. 语法高亮.语法检查和自动例化 2.1 配置ctags 2.2 配置语法检查 2.3 自动例化 3. ...
- VScode软件入门:用户自定义代码块+常用快捷键+常用扩展插件
目录 VScode软件入门 VScode用户自定义代码块 用户自定义代码块 VScode快捷键 html文件快速创建html结构 谷歌快捷键 vscode扩展插件 Auto Close Tag: Au ...
- Gradle项目中gradle.build文件中的buildScript代码块
感谢原作者的劳动 在编写Gradle脚本的时候,在build.gradle文件中经常看到这样的代码: buildScript {repositories {mavenCentral()} }repos ...
- eclipse实现代码块折叠-类似于VS中的#region……#endregion
刚才在写代码的时候,写了十几行可以说是重复的代码: 如果整个方法或类中代码多了,感觉它们太TM占地方了,给读者在阅读代码上造成很大的困难,于是想到能不能把他们"浓缩"成一行,脑子里 ...
- Gradle中的buildScript代码块
在编写Gradle脚本的时候,在build.gradle文件中经常看到这样的代码: build.gradle 1 2 3 4 5 6 7 8 9 buildScript { repositories ...
- ios android分享代码,快速插入代码块——iOS Android
昨天看到一篇分享插入代码块的文章 Xcode 快速开发 代码块,想到把我知道的其它方案也分享一下 iOS篇 这种方案可行,但效率不够高 方案二:Dash Dash 目前只有 macOS 版本,免费,但 ...
- python中控制代码块逻辑关系_一、Python基础知识
1.1 Python简介 (1)解释型语言 解释型语言在运行程序的时候才逐行翻译.运行. ①优点: 有良好的平台兼容性,在任何环境中都可以运行(安装了解释器)灵活,修改代码的时候直接修改就可以,可以快 ...
- Sublime Text的使用代码块安装的模块
在众多的开发工具IDE当中.作者现在唯独深爱sublime text(以下简称st).以前做后台开发使用visual studio(以下简称vs),以及实行前后端分工也是配合后台使用vs.这里要讲述两 ...
最新文章
- python 读取二进制文件 转为16进制输出
- 聚类算法:Hierarchical Clustering层次聚类
- YAML简介和简单说明
- 申明 csdn的博客wjszf 也是本人的
- leetcode152. 乘积最大子数组
- Flowable 数据库表结构 ACT_RU_IDENTITYLINK
- c语言 div ldiv_C ++中带有示例的ldiv()函数
- 一个C#控制台小游戏(源码解析)
- 云MAS中CMPP3.0协议封装与移动短信状态报告状态码说明
- GridLayout 介绍 (转载自http://www.cnblogs.com/skywang12345/p/3154150.html)
- 与京东物流合作,能不能补全东方甄选的最后一块拼图?
- ENSP实验七——RIP的基本配置
- 基于web的学生管理系统(三)前端页面
- 联想拯救者Y7000P鼠标卡顿问题(已解决)
- Julia:如何调用其他sub文件中的函数
- 华为的android文件夹在哪,安卓手机文件目录详解
- 新媒体运营工具有哪些?思维导图带你修炼升级
- STM8105X4 AD采样
- 用Tkinter打造自己的Python IDE开发工具(7)变量数据共享机制及小白量化策略编写
- lto1: fatal error: bytecode stream generated with LTO version 8.1 instead of the expected 4.0
热门文章
- 华胜天成天成云PaaS平台
- 加速进入“大数据时代”
- win7 wmp12播放rmvb格式的一些问题
- 字节跳动应届生薪资都能2万+,年薪30万,这样工作真的开心吗?
- 2023 K8s 认证工程师 CKA 考题分析和题库练习(下)
- 桂电计算机学院推免研究生名单,欢迎优秀的推免生或考研的同学选择西南交通大学图像视觉团队...
- 美元的升贬与世界经济的升腾和沉沦
- what data contract
- java-zxing生成条形码(一维码)
- ubuntu系统解决特设符号无法输出问题(如@,|,“ ”)