Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
docsify-plugin-flexible-alerts
Advanced tools
docsify plugin to convert blockquotes into beautiful and configurable alerts using preconfigured or own styles and alert types.
This docsify 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.
index.html
fileAssuming you have a working docsify app set up, it is easy to use this plugin.
Add the following script tag to your index.html
<!-- Latest -->
<script src="https://unpkg.com/docsify-plugin-flexible-alerts"></script>
In docsify setup configure the plugin so it does fit your needs. A custom setup is not mandatory. By default styles flat
and callout
(Default: callout
) and types NOTE
, TIP
, WARNING
and ATTENTION
are supported.
You can change it using plugin configuration via index.html
or for a single alert in your markdown files. (please see section Customizations
for further details)
Sample index.html
file using style flat
instead of callout
<script>
window.$docsify = {
'flexible-alerts': {
style: 'flat'
}
};
</script>
Sample index.html
using custom headings
<script>
window.$docsify = {
'flexible-alerts': {
note: {
label: "Hinweis"
},
tip: {
label: "Tipp"
},
warning: {
label: "Warnung"
},
attention: {
label: "Achtung"
}
}
};
</script>
Sample index.html
using multilingual headings
<script>
window.$docsify = {
'flexible-alerts': {
note: {
label: {
'/de-DE/': 'Hinweis',
'/': 'Note'
}
},
tip: {
label: {
'/de-DE/': 'Tipp',
'/': 'Tip'
}
},
warning: {
label: {
'/de-DE/': 'Warnung',
'/': 'Warning'
}
},
attention: {
label: {
'/de-DE/': 'Achtung',
'/': 'Attention'
}
}
}
};
</script>
Modify or add a new blockquote so it matches required syntax like shown in following examples:
Sample alert using type NOTE
> [!NOTE]
> An alert of type 'note' using global style 'callout'.
Sample alert using type TIP
> [!TIP]
> An alert of type 'tip' using global style 'callout'.
Sample alert using type WARNING
> [!WARNING]
> An alert of type 'warning' using global style 'callout'.
Sample alert using type ATTENTION
> [!ATTENTION]
> An alert of type 'attention' using global style 'callout'.
Serve your documentation (docsify serve
) as usual.
To use the plugin just modify an existing blockquote and prepend a line matching pattern [!type]
. By default types NOTE
, TIP
, WARNING
and ATTENTION
are supported. You can extend the available types by providing a valid configuration (see below for an example).
> [!NOTE]
> An alert of type 'note' using global style 'callout'.
> [!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. 'fas fa-comment' |
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:
> [!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.
As mentioned above you can provide your own alert types. Therefore, you have to provide the type configuration via index.html
. Following example shows an additional type COMMENT
.
<script>
window.$docsify = {
'flexible-alerts': {
comment: {
label: 'Comment',
// localization
label: {
'/en-GB/': 'Comment',
'/': 'Kommentar'
},
// Assuming that we use Font Awesome
icon: 'fas fa-comment',
className: 'note'
}
}
};
</script>
Since we are using FontAwesome in previous example we have to include the library via index.html
, e.g. using a CDN.
In Markdown just use the alert according to the types provided by default.
> [!COMMENT]
> An alert of type 'comment' using style 'callout' with default settings.
Instead of configuring this plugin using key flexible-alerts
you can use camel case notation flexibleAlerts
as well.
<script>
window.$docsify = {
'flexibleAlerts': {
style: 'flat'
}
};
</script>
If alerts do no look as expected, check if your index.html
as well as alerts in Markdown are valid according to this documentation.
12/22/2022
08/20/2022
09/20/2020
09/23/2019
04/14/2019
03/03/2019
01/19/2019
01/06/2019
FAQs
docsify plugin to convert blockquotes into beautiful and configurable alerts using preconfigured or own styles and alert types.
The npm package docsify-plugin-flexible-alerts receives a total of 511 weekly downloads. As such, docsify-plugin-flexible-alerts popularity was classified as not popular.
We found that docsify-plugin-flexible-alerts demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.