From f9950e0506c4d26368a9a100e631a3ea625749d3 Mon Sep 17 00:00:00 2001 From: John Hildenbiddle Date: Wed, 7 Aug 2024 22:38:35 -0500 Subject: [PATCH 1/5] Add support for GitHub style callouts --- docs/helpers.md | 78 ++++++++++++++++++-------- docs/ui-kit.md | 34 +++++++++++ src/core/render/compiler.js | 2 + src/core/render/compiler/blockquote.js | 36 ++++++++++++ src/core/render/tpl.js | 3 + src/themes/addons/core-dark.css | 37 ++++++++++++ src/themes/shared/_markdown.css | 20 ++++++- src/themes/shared/_vars.css | 72 +++++++++++++++--------- 8 files changed, 230 insertions(+), 52 deletions(-) create mode 100644 src/core/render/compiler/blockquote.js diff --git a/docs/helpers.md b/docs/helpers.md index 57eaa41d0..006b8e853 100644 --- a/docs/helpers.md +++ b/docs/helpers.md @@ -6,35 +6,69 @@ docsify extends Markdown syntax to make your documents more readable. ## Callouts -### Important content +Docsify supports [GitHub style](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts) callouts (also known as "admonitions" or "alerts"). -Important content like: + +> [!CAUTION] +> **Caution** callouts communicate negative potential consequences of an action. -```markdown -!> **Time** is money, my friend! -``` + +> [!IMPORTANT] +> **Important** callouts communicate information necessary for users to succeed. -is rendered as: + +> [!NOTE] +> **Note** callouts communicate information that users should take into account. -!> **Time** is money, my friend! + +> [!TIP] +> **Tip** callouts communicate optional information to help a user be more successful. -### Tips + +> [!WARNING] +> **Warning** callouts communicate potential risks user should be aware of. -General tips like: +**Markdown** + ```markdown -?> _TODO_ unit test +> [!CAUTION] +> **Caution** callouts communicate negative potential consequences of an action. + +> [!IMPORTANT] +> **Important** callouts communicate information necessary for users to succeed. + +> [!NOTE] +> **Note** callouts communicate information that users should take into account. + +> [!TIP] +> **Tip** callouts communicate optional information to help a user be more successful. + +> [!WARNING] +> **Warning** callouts communicate potential risks user should be aware of. ``` -are rendered as: +### Legacy Style ⚠️ -?> _TODO_ unit test +The following Docsify v4 callout syntax has been deprecated and will be removed in a future version. + +!> **Important** callouts communicate information necessary for users to succeed. + +?> **Tip** callouts communicate optional information to help a user be more successful. + +**Markdown** + +```markdown +!> **Important** callouts communicate information necessary for users to succeed. + +?> **Tip** callouts communicate optional information to help a user be more successful. +``` ## Link attributes ### disabled -```md +```markdown [link](/demo ':disabled') ``` @@ -42,7 +76,7 @@ are rendered as: Sometimes we will use some other relative path for the link, and we have to tell docsify that we don't need to compile this link. For example: -```md +```markdown [link](/demo/) ``` @@ -50,13 +84,13 @@ It will be compiled to `link` and will load `/demo/README Now you can do that -```md +```markdown [link](/demo/ ':ignore') ``` You will get `link`html. Do not worry, you can still set the title for the link. -```md +```markdown [link](/demo/ ':ignore title') link @@ -64,14 +98,14 @@ You will get `link`html. Do not worry, you can still set th ### target -```md +```markdown [link](/demo ':target=_blank') [link](/demo2 ':target=_self') ``` ## Task lists -```md +```markdown - [ ] foo - bar - [x] baz @@ -91,19 +125,19 @@ You will get `link`html. Do not worry, you can still set th ### Class names -```md +```markdown ![logo](https://docsify.js.org/_media/icon.svg ':class=someCssClass') ``` ### IDs -```md +```markdown ![logo](https://docsify.js.org/_media/icon.svg ':id=someCssId') ``` ### Sizes -```md +```markdown ![logo](https://docsify.js.org/_media/icon.svg ':size=WIDTHxHEIGHT') ![logo](https://docsify.js.org/_media/icon.svg ':size=50x100') ![logo](https://docsify.js.org/_media/icon.svg ':size=100') @@ -119,7 +153,7 @@ You will get `link`html. Do not worry, you can still set th ## Heading IDs -```md +```markdown ### Hello, world! :id=hello-world ``` diff --git a/docs/ui-kit.md b/docs/ui-kit.md index 1d32275a1..0c9057dfd 100644 --- a/docs/ui-kit.md +++ b/docs/ui-kit.md @@ -53,6 +53,40 @@ ## Callouts +### Github Style + + +> [!CAUTION] +> **Caution** callouts communicate negative potential consequences of an action. + + +> [!IMPORTANT] +> **Important** callouts communicate information necessary for users to succeed. + + +> [!NOTE] +> **Note** callouts communicate information that users should take into account. + + +> [!TIP] +> **Tip** callouts communicate optional information to help a user be more successful. + + +> [!WARNING] +> **Warning** callouts communicate potential risks user should be aware of. + +**Nested** + + +> [!CAUTION] +> **Caution** callouts communicate negative potential consequences of an action. +> > [!IMPORTANT] +> > **Important** callouts communicate information necessary for users to succeed. +> > > [!NOTE] +> > > **Note** callouts communicate information that users should take into account. + +#### Legacy Docsify Style + !> **Important** callout with `inline code` and additional placeholder text used to force the content to wrap and span multiple lines. diff --git a/src/core/render/compiler.js b/src/core/render/compiler.js index d01e65aea..e35412541 100644 --- a/src/core/render/compiler.js +++ b/src/core/render/compiler.js @@ -13,6 +13,7 @@ import { import { imageCompiler } from './compiler/image.js'; import { highlightCodeCompiler } from './compiler/code.js'; import { paragraphCompiler } from './compiler/paragraph.js'; +import { blockquoteCompiler } from './compiler/blockquote.js'; import { taskListCompiler } from './compiler/taskList.js'; import { taskListItemCompiler } from './compiler/taskListItem.js'; import { linkCompiler } from './compiler/link.js'; @@ -232,6 +233,7 @@ export class Compiler { return `${str}`; }; + origin.blockquoteCompiler = blockquoteCompiler({ renderer }); origin.code = highlightCodeCompiler({ renderer }); origin.link = linkCompiler({ renderer, diff --git a/src/core/render/compiler/blockquote.js b/src/core/render/compiler/blockquote.js new file mode 100644 index 000000000..5f00951de --- /dev/null +++ b/src/core/render/compiler/blockquote.js @@ -0,0 +1,36 @@ +export const blockquoteCompiler = ({ renderer }) => + (renderer.blockquote = function ({ tokens }) { + const calloutData = + tokens[0].type === 'paragraph' && + // 0: Match "[!TIP] My Title" + // 1: Mark "[!TIP]" + // 2: Type "TIP" + tokens[0].raw.match(/^(\[!(\w+)\])/); + + let openTag = '
'; + let closeTag = '
'; + + if (calloutData) { + const calloutMark = calloutData[1]; // "[!TIP]" + const calloutType = calloutData[2].toLowerCase(); // "tip" + const token = tokens[0].tokens[0]; + + // Remove callout mark from tokens + ['raw', 'text'].forEach(key => { + token[key] = token[key].replace(calloutMark, '').trimStart(); + }); + + // Remove empty paragraph + if (tokens.length > 1 && !token.raw.trim()) { + tokens = tokens.slice(1); + } + + openTag = `
`; + closeTag = `
`; + } + + const body = this.parser.parse(tokens); + const html = `${openTag}${body}${closeTag}`; + + return html; + }); diff --git a/src/core/render/tpl.js b/src/core/render/tpl.js index 3cb990e95..8e0449e80 100644 --- a/src/core/render/tpl.js +++ b/src/core/render/tpl.js @@ -112,6 +112,9 @@ export function tree( return tpl.replace('{inner}', innerHTML); } +/** + * @deprecated + */ export function helper(className, content) { return /* html */ `

${content.slice(5).trim()}

`; } diff --git a/src/themes/addons/core-dark.css b/src/themes/addons/core-dark.css index 790b75cef..4f856b819 100644 --- a/src/themes/addons/core-dark.css +++ b/src/themes/addons/core-dark.css @@ -28,9 +28,46 @@ color-scheme: dark; } +/* Cover */ +/* ========================================================================== */ .cover-main { a.button.secondary { color: var(--color-text); border-color: rgba(255, 255, 255, 0.5); } } + +/* Markdown */ +/* ========================================================================== */ +.markdown-section { + .callout { + &[class] { + --callout-bg: unset; + } + + &.caution { + --callout-border-color: #991b1b; /* Tailwind: red 800 */ + } + + &.important { + --callout-border-color: #5b21b6; /* Tailwind: violet 800 */ + } + + &.note { + --callout-border-color: var(--theme-color-4); + } + + &.tip { + --callout-border-color: #115e59; /* Tailwind: teal 800 */ + } + + &.warning { + --callout-border-color: #a16207; /* Tailwind: yellow 700 */ + } + + code, + pre:where([data-lang]) { + background: var(--color-mono-min); + } + } +} diff --git a/src/themes/shared/_markdown.css b/src/themes/shared/_markdown.css index b328c001e..c62f8ea6c 100644 --- a/src/themes/shared/_markdown.css +++ b/src/themes/shared/_markdown.css @@ -126,13 +126,29 @@ text-align: center; } + > :first-child { + margin-top: 0; + } + + > :last-child { + margin-bottom: 0; + } + code, strong { color: inherit; } code { - background: rgba(0, 0, 0, 0.08); + background: rgba(0, 0, 0, 0.05); + } + + pre:where([data-lang]) { + background: rgba(255, 255, 255, 0.4); + } + + .callout { + margin-block: var(--margin-block); } } @@ -226,7 +242,7 @@ padding: 0 !important; padding-block: 1.5rem !important; padding-inline: 1.5rem !important; - background: inherit; + background: transparent; color: inherit; font-size: inherit; white-space: inherit; diff --git a/src/themes/shared/_vars.css b/src/themes/shared/_vars.css index 72ed013e4..ffb242265 100644 --- a/src/themes/shared/_vars.css +++ b/src/themes/shared/_vars.css @@ -81,20 +81,20 @@ --button-border-radius : 100vh; --button-color : #fff; --button-padding : 0.3em 1.25em 0.315em 1.25em; - --callout-bg : ; + --callout-bg : var(--color-mono-1); --callout-border-color : ; - --callout-border-radius : 0 var(--border-radius) var(--border-radius) 0; - --callout-border-width : 0 0 0 4px; + --callout-border-radius : var(--border-radius); + --callout-border-width : 1px; --callout-charm-bg : ; --callout-charm-border-radius : 100vh; - --callout-charm-color : ; - --callout-charm-content : ; - --callout-charm-font-size : 1.2em; - --callout-charm-inset : 50% auto auto -2px; - --callout-charm-size : 1.3em; - --callout-charm-translate : -50% -50%; + --callout-charm-color : #fff; + --callout-charm-content : ''; + --callout-charm-font-size : 16px; + --callout-charm-inset : 1em auto auto 15px; + --callout-charm-size : 26px; + --callout-charm-translate : 0; --callout-color : ; - --callout-padding : 1em 1em 1em var(--callout-charm-size); + --callout-padding : 1em 1em 1em calc(25px + var(--callout-charm-size)); --code-bg : var(--color-mono-1); --code-color : ; --codeblock-bg : var(--code-bg); @@ -181,22 +181,38 @@ /* Scoped Variables */ /* ========================================================================== */ -/* Callout: Important */ -.callout.important { - --callout-bg : var(--color-mono-1); - --callout-border-color : #f66; - --callout-charm-bg : var(--callout-border-color); - --callout-charm-color : #fff; - --callout-charm-content: '!'; - --callout-color : ; -} +.callout { + &.caution { + /* Tailwind: red 50/200/500 */ + --callout-bg : #fef2f2; + --callout-border-color: #fecaca; + --callout-charm-bg : #ef4444 center no-repeat url('data:image/svg+xml,'); + } + + &.important { + /* Tailwind: violet 50/200/500 */ + --callout-bg : #f5f3ff; + --callout-border-color: #ddd6fe; + --callout-charm-bg : #8b5cf6 center no-repeat url('data:image/svg+xml,'); + } + + &.note { + --callout-bg : var(--theme-color-1); + --callout-border-color: var(--theme-color-2); + --callout-charm-bg : var(--theme-color) center no-repeat url('data:image/svg+xml,'); + } -/* Callout: Important */ -.callout.tip { - --callout-bg : var(--theme-color-1); - --callout-border-color : var(--theme-color); - --callout-charm-bg : var(--callout-border-color); - --callout-charm-color : #fff; - --callout-charm-content: 'i'; - --callout-color : ; -} \ No newline at end of file + &.tip { + /* Tailwind: teal 50/200/500 */ + --callout-bg : #f0fdfa; + --callout-border-color: #99f6e4; + --callout-charm-bg : #14b8a6 center no-repeat url('data:image/svg+xml,'); + } + + &.warning { + /* Tailwind: amber 50/200/300 */ + --callout-bg : #fffbeb; + --callout-border-color: #fde68a; + --callout-charm-bg : #fcd34d center no-repeat url('data:image/svg+xml,'); + } +} From f9a9869fc48aad8595c5af29dfef8898463b7aa7 Mon Sep 17 00:00:00 2001 From: John Hildenbiddle Date: Wed, 7 Aug 2024 23:57:48 -0500 Subject: [PATCH 2/5] Update docs and migrate to new syntax --- docs/adding-pages.md | 4 ++-- docs/cdn.md | 4 ++-- docs/configuration.md | 8 +++---- docs/custom-navbar.md | 4 ++-- docs/deploy.md | 10 ++++----- docs/embed-files.md | 8 +++---- docs/helpers.md | 8 +++---- docs/index.html | 6 ++++++ docs/language-highlight.md | 4 ++-- docs/markdown.md | 2 +- docs/plugins.md | 2 +- docs/quickstart.md | 4 ++-- docs/themes.md | 6 +++--- docs/ui-kit.md | 43 +++++++++++++++++++++++--------------- docs/vue.md | 2 +- 15 files changed, 65 insertions(+), 50 deletions(-) diff --git a/docs/adding-pages.md b/docs/adding-pages.md index 9ce19f9d7..62f95944d 100644 --- a/docs/adding-pages.md +++ b/docs/adding-pages.md @@ -67,7 +67,7 @@ To create section headers: You need to create a `.nojekyll` in `./docs` to prevent GitHub Pages from ignoring files that begin with an underscore. -!> Docsify only looks for `_sidebar.md` in the current folder, and uses that, otherwise it falls back to the one configured using `window.$docsify.loadSidebar` config. +> [!IMPORTANT] Docsify only looks for `_sidebar.md` in the current folder, and uses that, otherwise it falls back to the one configured using `window.$docsify.loadSidebar` config. Example file structure: @@ -98,7 +98,7 @@ You can specify `alias` to avoid unnecessary fallback. ``` -!> You can create a `README.md` file in a subdirectory to use it as the landing page for the route. +> [!IMPORTANT] You can create a `README.md` file in a subdirectory to use it as the landing page for the route. ## Set Page Titles from Sidebar Selection diff --git a/docs/cdn.md b/docs/cdn.md index f462a079d..f8dbc1ca0 100644 --- a/docs/cdn.md +++ b/docs/cdn.md @@ -29,7 +29,7 @@ Uncompressed resources are available by omitting the `.min` from the filename. Specifying the latest major version allows your site to receive all non-breaking enhancements ("minor" updates) and bug fixes ("patch" updates) as they are released. This is good option for those who prefer a zero-maintenance way of keeping their site up to date with minimal risk as new versions are published. -?> When a new major version is released, you will need to manually update the major version number after the `@` symbol in your CDN URLs. +> [!TIP] When a new major version is released, you will need to manually update the major version number after the `@` symbol in your CDN URLs. ```html @@ -44,7 +44,7 @@ Specifying the latest major version allows your site to receive all non-breaking Specifying an exact version prevents any future updates from affecting your site. This is good option for those who prefer to manually update their resources as new versions are published. -?> When a new version is released, you will need to manually update the version number after the `@` symbol in your CDN URLs. +> [!TIP] When a new version is released, you will need to manually update the version number after the `@` symbol in your CDN URLs. ```html diff --git a/docs/configuration.md b/docs/configuration.md index c2fa6d897..b2d624651 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -301,7 +301,7 @@ Key `bindings` are defined as case insensitive string values separated by `+`. M The `callback` function receive a [keydown event](https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event) as an argument. -!> Let site visitors know your custom key bindings are available! If a binding is associated with a DOM element, consider inserting a `` element as a visual cue (e.g., alt + a) or adding [title](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title) and [aria-keyshortcuts](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-keyshortcuts) attributes for hover/focus hints. +> [!IMPORTANT] Let site visitors know your custom key bindings are available! If a binding is associated with a DOM element, consider inserting a `` element as a visual cue (e.g., alt + a) or adding [title](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title) and [aria-keyshortcuts](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-keyshortcuts) attributes for hover/focus hints. ```js window.$docsify = { @@ -376,7 +376,7 @@ window.$docsify = { Website logo as it appears in the sidebar. You can resize it using CSS. -!> Logo will only be visible if `name` prop is also set. See [name](#name) configuration. +> [!IMPORTANT] Logo will only be visible if `name` prop is also set. See [name](#name) configuration. ```js window.$docsify = { @@ -919,7 +919,7 @@ For more details, see [#1131](https://github.com/docsifyjs/docsify/issues/1131). ## themeColor ⚠️ -!> Deprecated as of v5. Use the `--theme-color` [theme property](themes#theme-properties) to [customize](themes#customization) your theme color. +> [!IMPORTANT] Deprecated as of v5. Use the `--theme-color` [theme property](themes#theme-properties) to [customize](themes#customization) your theme color. - Type: `String` @@ -933,7 +933,7 @@ window.$docsify = { ## topMargin ⚠️ -!> Deprecated as of v5. Use the `--scroll-padding-top` [theme property](themes#theme-properties) to specify a scroll margin when using a sticky navbar. +> [!IMPORTANT] Deprecated as of v5. Use the `--scroll-padding-top` [theme property](themes#theme-properties) to specify a scroll margin when using a sticky navbar. - Type: `Number|String` - Default: `0` diff --git a/docs/custom-navbar.md b/docs/custom-navbar.md index c9c1f8f95..b1b2acbbf 100644 --- a/docs/custom-navbar.md +++ b/docs/custom-navbar.md @@ -4,7 +4,7 @@ If you need custom navigation, you can create a HTML-based navigation bar. -!> Note that documentation links begin with `#/`. +> [!IMPORTANT] Note that documentation links begin with `#/`. ```html @@ -51,7 +51,7 @@ To create drop-down menus: - [chinese](/zh-cn/) ``` -!> You need to create a `.nojekyll` in `./docs` to prevent GitHub Pages from ignoring files that begin with an underscore. +> [!IMPORTANT] You need to create a `.nojekyll` in `./docs` to prevent GitHub Pages from ignoring files that begin with an underscore. `_navbar.md` is loaded from each level directory. If the current directory doesn't have `_navbar.md`, it will fall back to the parent directory. If, for example, the current path is `/guide/quick-start`, the `_navbar.md` will be loaded from `/guide/_navbar.md`. diff --git a/docs/deploy.md b/docs/deploy.md index 4bcb6d997..c6bbccb77 100644 --- a/docs/deploy.md +++ b/docs/deploy.md @@ -14,14 +14,14 @@ It is recommended that you save your files to the `./docs` subfolder of the `mai ![GitHub Pages](_images/deploy-github-pages.png) -!> You can also save files in the root directory and select `main branch`. -You'll need to place a `.nojekyll` file in the deploy location (such as `/docs` or the gh-pages branch) +> [!IMPORTANT] You can also save files in the root directory and select `main branch`. +> You'll need to place a `.nojekyll` file in the deploy location (such as `/docs` or the gh-pages branch) ## GitLab Pages If you are deploying your master branch, create a `.gitlab-ci.yml` with the following script: -?> The `.public` workaround is so `cp` doesn't also copy `public/` to itself in an infinite loop. +> [!TIP] The `.public` workaround is so `cp` doesn't also copy `public/` to itself in an infinite loop. ```YAML pages: @@ -37,11 +37,11 @@ pages: - master ``` -!> You can replace script with `- cp -r docs/. public`, if `./docs` is your Docsify subfolder. +> [!IMPORTANT] You can replace script with `- cp -r docs/. public`, if `./docs` is your Docsify subfolder. ## Firebase Hosting -!> You'll need to install the Firebase CLI using `npm i -g firebase-tools` after signing into the [Firebase Console](https://console.firebase.google.com) using a Google Account. +> [!IMPORTANT] You'll need to install the Firebase CLI using `npm i -g firebase-tools` after signing into the [Firebase Console](https://console.firebase.google.com) using a Google Account. Using a terminal, determine and navigate to the directory for your Firebase Project. This could be `~/Projects/Docs`, etc. From there, run `firebase init` and choose `Hosting` from the menu (use **space** to select, **arrow keys** to change options and **enter** to confirm). Follow the setup instructions. diff --git a/docs/embed-files.md b/docs/embed-files.md index 60172d8ae..175e95d2d 100644 --- a/docs/embed-files.md +++ b/docs/embed-files.md @@ -75,7 +75,7 @@ Example: If you embed the file as `iframe`, `audio` and `video`, then you may need to set the attributes of these tags. -?> Note, for the `audio` and `video` types, docsify adds the `controls` attribute by default. When you want add more attributes, the `controls` attribute need to be added manually if need be. +> [!TIP] Note, for the `audio` and `video` types, docsify adds the `controls` attribute by default. When you want add more attributes, the `controls` attribute need to be added manually if need be. ```md [filename](_media/example.mp4 ':include :type=video controls width=100%') @@ -101,13 +101,13 @@ Embedding any type of source code file, you can specify the highlighted language [](_media/example.html ':include :type=code text') -?> How to set highlight? You can see [here](language-highlight.md). +> [!TIP] How to set highlight? You can see [here](language-highlight.md). ## Embed a gist You can embed a gist as markdown content or as a code block - this is based on the approach at the start of [Embed Files](#embed-files) section, but uses a raw gist URL as the target. -?> **No** plugin or app config change is needed here to make this work. In fact, the "Embed" `script` tag that is copied from a gist will _not_ load even if you make plugin or config changes to allow an external script. +> [!TIP] **No** plugin or app config change is needed here to make this work. In fact, the "Embed" `script` tag that is copied from a gist will _not_ load even if you make plugin or config changes to allow an external script. ### Identify the gist's metadata @@ -132,7 +132,7 @@ Here are two examples based on the sample gist: - https://gist.githubusercontent.com/anikethsaha/f88893bb563bb7229d6e575db53a8c15/raw/content.md - https://gist.githubusercontent.com/anikethsaha/f88893bb563bb7229d6e575db53a8c15/raw/script.js -?> Alternatively, you can get a raw URL directly clicking the _Raw_ button on a gist file. But, if you use that approach, just be sure to **remove** the revision number between `raw/` and the filename so that the URL matches the pattern above instead. Otherwise your embedded gist will **not** show the latest content when the gist is updated. +> [!TIP] Alternatively, you can get a raw URL directly clicking the _Raw_ button on a gist file. But, if you use that approach, just be sure to **remove** the revision number between `raw/` and the filename so that the URL matches the pattern above instead. Otherwise your embedded gist will **not** show the latest content when the gist is updated. Continue with one of the sections below to embed the gist on a Docsify page. diff --git a/docs/helpers.md b/docs/helpers.md index 006b8e853..32588664e 100644 --- a/docs/helpers.md +++ b/docs/helpers.md @@ -52,16 +52,16 @@ Docsify supports [GitHub style](https://docs.github.com/en/get-started/writing-o The following Docsify v4 callout syntax has been deprecated and will be removed in a future version. -!> **Important** callouts communicate information necessary for users to succeed. +!> Legacy **Important** callouts are deprecated. -?> **Tip** callouts communicate optional information to help a user be more successful. +?> Legacy **Tip** callouts are deprecated. **Markdown** ```markdown -!> **Important** callouts communicate information necessary for users to succeed. +!> Legacy **Important** callouts are deprecated. -?> **Tip** callouts communicate optional information to help a user be more successful. +?> Legacy **Tip** callouts are deprecated. ``` ## Link attributes diff --git a/docs/index.html b/docs/index.html index 734fe87e5..664a37f2f 100644 --- a/docs/index.html +++ b/docs/index.html @@ -47,6 +47,12 @@ disabled /> + + +