# GitBook plugin: Flexible Alerts
![Build Status](https://github.com/fzankl/gitbook-plugin-flexible-alerts/actions/workflows/main.yml/badge.svg)
[![npm version](https://img.shields.io/npm/v/gitbook-plugin-flexible-alerts/latest.svg)](https://www.npmjs.com/package/gitbook-plugin-flexible-alerts)
[![npm Downloads](https://img.shields.io/npm/dt/gitbook-plugin-flexible-alerts.svg)](https://www.npmjs.com/package/gitbook-plugin-flexible-alerts)
This GitBook plugin converts blockquotes into beautiful alerts. Look and feel can be configured on a global as well as on a alert specific level so output does fit your needs (some examples are shown below). In addition, you can provide own alert types.
![Sample alerts created with plugin 'flexible-alerts'](https://user-images.githubusercontent.com/44210522/50688702-ea774f00-1026-11e9-9281-ca615cb466f5.jpg)
## Installation
### Step #1 - Update book.json file
1. In you gitbook's book.json file, add `flexible-alerts` to plugins list.
2. In pluginsConfig, configure the plugin so it does fit your needs. A custom setup is not mandatory.
3. By default style 'callout' and headings 'Note', 'Tip', 'Warning', 'Attention' will be used. You can change it using plugin configuration via `book.json` or for a single alert in your markdown files.
**Sample `book.json` file for gitbook version 2.0.0+**
```json
{
"plugins": [
"flexible-alerts"
]
}
```
**Sample `book.json` file for gitbook version 2.0.0+ and style `flat` instead of `callout`**
```json
{
"plugins": [
"flexible-alerts"
],
"pluginsConfig": {
"flexible-alerts": {
"style": "flat"
}
}
}
```
**Sample `book.json` file for gitbook version 2.0.0+ and custom headings**
```json
{
"plugins": [
"flexible-alerts"
],
"pluginsConfig": {
"flexible-alerts": {
"note": {
"label": "Hinweis"
},
"tip": {
"label": "Tipp"
},
"warning": {
"label": "Warnung"
},
"danger": {
"label": "Achtung"
}
}
}
}
```
**Sample `book.json` file for gitbook version 2.0.0+ and multilingual headings**
```json
{
"plugins": [
"flexible-alerts"
],
"pluginsConfig": {
"flexible-alerts": {
"note": {
"label": {
"de": "Hinweis",
"en": "Note"
}
},
"tip": {
"label": {
"de": "Tipp",
"en": "Tip"
}
},
"warning": {
"label": {
"de": "Warnung",
"en": "Warning"
}
},
"danger": {
"label": {
"de": "Achtung",
"en": "Attention"
}
}
}
}
}
```
Note: Above snippets can be used as complete `book.json` file, if one of these matches your requirements and your book doesn't have one yet.
### Step #2 - gitbook commands
1. Run `gitbook install`. It will automatically install `flexible-alerts` gitbook plugin for your book. This is needed only once.
2. Build your book (`gitbook build`) or serve (`gitbook serve`) as usual.
## Usage
To use the plugin just modify an existing blockquote and prepend a line matching pattern `[!type]`. By default types `NOTE`, `TIP`, `WARNING` and `DANGER` are supported. You can extend the available types by providing a valid configuration (see below for an example).
```markdown
> [!NOTE]
> An alert of type 'note' using global style 'callout'.
```
```markdown
> [!NOTE|style:flat]
> An alert of type 'note' using alert specific style 'flat' which overrides global style 'callout'.
```
As you can see in the second snippet, output can be configured on alert level also. Supported options are listed in following table:
| Key | Allowed value |
| --------------- | ---- |
| style | One of follwowing values: callout, flat |
| label | Any text |
| icon | A valid Font Awesome icon, e.g. 'fa fa-info-circle' |
| className | A name of a CSS class which specifies the look and feel |
| labelVisibility | One of follwowing values: visible (default), hidden |
| iconVisibility | One of follwowing values: visible (default), hidden |
Multiple options can be used for single alerts as shown below:
```markdown
> [!TIP|style:flat|label:My own heading|iconVisibility:hidden]
> An alert of type 'tip' using alert specific style 'flat' which overrides global style 'callout'.
> In addition, this alert uses an own heading and hides specific icon.
```
![Custom alert](https://user-images.githubusercontent.com/44210522/50689970-04676080-102c-11e9-9cbc-8af129cb988c.png)
As mentioned above you can provide your own alert types. Therefore, you have to provide the type configuration via `book.json`. Following example shows an additional type `COMMENT`.
```json
{
"plugins": [
"flexible-alerts"
],
"pluginsConfig": {
"flexible-alerts": {
"style": "callout",
"comment": {
"label": "Comment",
"icon": "fa fa-comments",
"className": "info"
}
}
}
}
```
In Markdown just use the alert according to the types provided by default.
```markdown
> [!COMMENT]
> An alert of type 'comment' using style 'callout' with default settings.
```
![Custom alert type 'comment'](https://user-images.githubusercontent.com/44210522/50722960-6f21a600-10d7-11e9-87e7-d40d87045afe.png)
## Troubleshooting
If alerts do not look as expected, check if your `book.json` as well as alerts in Markdown are valid according to this documentation.
## Changelog
08/15/2022 - Fixed code smell in stylesheet file and updated development dependencies
04/08/2019 - Fixed issue concerning languages using characters others than [a-z,A-Z,0-9] like Chinese or Russian
02/24/2019 - Added support for Internet Explorer 11
01/07/2019 - Moved complete icon definition to pluginsConfig section
01/05/2019 - Initial Release
没有合适的资源?快使用搜索试试~ 我知道了~
Android工程师学习Flutter指南.zip
共111个文件
js:37个
css:15个
json:14个
0 下载量 164 浏览量
2024-08-30
09:12:27
上传
评论
收藏 4.11MB ZIP 举报
温馨提示
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传,可轻松copy复刻,拿到资料包后可轻松复现出一样的项目,本人系统开发经验充足(全栈开发),有任何使用问题欢迎随时与我联系,我会及时为您解惑,提供帮助 【资源内容】:项目具体内容可查看/点击本页面下方的*资源详情*,包含完整源码+工程文件+说明(若有)等。【若无VIP,此资源可私信获取】 【本人专注IT领域】:有任何使用问题欢迎随时与我联系,我会及时解答,第一时间为您提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 【适合场景】:相关项目设计中,皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻,也可基于此项目来扩展开发出更多功能 #注 1. 本资源仅用于开源学习和技术交流。不可商用等,一切后果由使用者承担 2. 部分字体及插图等来自网络,若是侵权请联系删除,本人不对所涉及的版权问题或内容负法律责任。收取的费用仅用于整理和收集资料耗费时间的酬劳 3. 积分资源不提供使用问题指导/解答
资源推荐
资源详情
资源评论
收起资源包目录
Android工程师学习Flutter指南.zip (111个子文件)
.bookignore 0B
.bookignore 0B
.bookignore 0B
style.css 51KB
style.css 51KB
website.css 31KB
website.css 31KB
website.css 8KB
website.css 8KB
ebook.css 3KB
ebook.css 3KB
style.css 2KB
plugin.css 1KB
search.css 1KB
search.css 974B
search.css 974B
plugin.css 582B
expandable-chapters.css 568B
fontawesome-webfont.eot 75KB
fontawesome-webfont.eot 75KB
search2.gif 1.13MB
search1.gif 1.04MB
search3.gif 624KB
index.html 7KB
index.html 7KB
page.html 837B
favicon.ico 4KB
favicon.ico 4KB
theme.js 111KB
theme.js 111KB
gitbook.js 103KB
gitbook.js 103KB
html5-entities.js 48KB
lunr.min.js 15KB
lunr.min.js 15KB
lunr.min.js 15KB
lunr.min.js 15KB
jquery.mark.min.js 13KB
search.js 8KB
html4-entities.js 6KB
fontsettings.js 6KB
fontsettings.js 6KB
search.js 6KB
search.js 6KB
xml-entities.js 3KB
buttons.js 3KB
buttons.js 3KB
plugin.js 2KB
expandable-chapters.js 2KB
index.js 2KB
search-lunr.js 2KB
search-lunr.js 2KB
plugin.js 1KB
search-engine.js 1KB
search-engine.js 1KB
plugin.js 559B
book.js 542B
plugin.js 327B
plugin.js 327B
index.js 287B
index.js 234B
index.js 231B
index.js 136B
index.js 125B
index.js 56B
package.json 3KB
package.json 2KB
package-lock.json 2KB
package-lock.json 2KB
package-lock.json 2KB
package.json 2KB
package.json 2KB
package.json 2KB
package.json 2KB
package.json 711B
package.json 711B
package.json 711B
search_index.json 568B
search_index.json 568B
LICENSE 11KB
LICENSE 11KB
LICENSE 11KB
LICENSE 1KB
LICENSE 1KB
LICENSE 1KB
plugin.js.map 4KB
index.js.map 374B
README.md 6KB
README.md 2KB
README.md 1KB
README.md 877B
README.md 793B
README.md 590B
SUMMARY.md 67B
README.md 16B
.npmignore 30B
.npmignore 15B
FontAwesome.otf 122KB
FontAwesome.otf 122KB
screenshots.png 24KB
共 111 条
- 1
- 2
资源评论
专家大圣
- 粉丝: 1884
- 资源: 6298
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 55555555555555555555555555555
- 三菱旋切飞剪,用的是运动控制器Q172DSCPU做的飞剪控制,凸轮曲线的由来是分析计算出来的 其中文件是一个程序+一个文档说明
- java基于ssm+vue游泳会员管理系统源码 带毕业论文
- mqttfx-5.3.0-windows-x64
- gitlab搭建与日常使用
- 【最新python必过毕设选题推荐】基于python+Django的电影数据爬取与数据分析(包含源码+万字LW+答辩PPT
- tts-vue-main
- 发那科FANUC电路板图纸 全套驱动图纸 原理图 电源图,维修人员必备电路图
- 西门子SMART200程序 PID的控制写法,突破8路,PID直接做成子程序,无密码,直接调用
- java基于ssm+vue物流配送人员车辆调度管理系统源码 带毕业论文
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功