diff --git a/packages/docusaurus-plugin-content-blog/src/index.ts b/packages/docusaurus-plugin-content-blog/src/index.ts
index c3d1639901..5bce9142dd 100644
--- a/packages/docusaurus-plugin-content-blog/src/index.ts
+++ b/packages/docusaurus-plugin-content-blog/src/index.ts
@@ -101,16 +101,6 @@ export default function pluginContentBlog(
);
},
- getClientModules() {
- const modules = [];
-
- if (options.admonitions) {
- modules.push(require.resolve('remark-admonitions/styles/infima.css'));
- }
-
- return modules;
- },
-
// Fetches blog contents and returns metadata for the necessary routes.
async loadContent() {
const {postsPerPage, routeBasePath} = options;
diff --git a/packages/docusaurus-plugin-content-docs/src/index.ts b/packages/docusaurus-plugin-content-docs/src/index.ts
index a539931fa9..30125c5dbe 100644
--- a/packages/docusaurus-plugin-content-docs/src/index.ts
+++ b/packages/docusaurus-plugin-content-docs/src/index.ts
@@ -110,14 +110,6 @@ export default function pluginContentDocs(
return getLoadedContentTranslationFiles(content);
},
- getClientModules() {
- const modules = [];
- if (options.admonitions) {
- modules.push(require.resolve('remark-admonitions/styles/infima.css'));
- }
- return modules;
- },
-
getPathsToWatch() {
function getVersionPathsToWatch(version: VersionMetadata): string[] {
const result = [
diff --git a/packages/docusaurus-plugin-content-pages/src/index.ts b/packages/docusaurus-plugin-content-pages/src/index.ts
index 53e9dd27d6..a58b66b8cd 100644
--- a/packages/docusaurus-plugin-content-pages/src/index.ts
+++ b/packages/docusaurus-plugin-content-pages/src/index.ts
@@ -93,16 +93,6 @@ export default function pluginContentPages(
);
},
- getClientModules() {
- const modules = [];
-
- if (options.admonitions) {
- modules.push(require.resolve('remark-admonitions/styles/infima.css'));
- }
-
- return modules;
- },
-
async loadContent() {
const {include} = options;
diff --git a/packages/docusaurus-theme-classic/package.json b/packages/docusaurus-theme-classic/package.json
index 99bcd14d3a..5487feb762 100644
--- a/packages/docusaurus-theme-classic/package.json
+++ b/packages/docusaurus-theme-classic/package.json
@@ -39,7 +39,7 @@
"copy-text-to-clipboard": "^3.0.1",
"fs-extra": "^10.0.0",
"globby": "^11.0.2",
- "infima": "0.2.0-alpha.26",
+ "infima": "0.2.0-alpha.27",
"lodash": "^4.17.20",
"parse-numeric-range": "^1.2.0",
"postcss": "^8.2.15",
diff --git a/packages/docusaurus-theme-classic/src/admonitions.css b/packages/docusaurus-theme-classic/src/admonitions.css
new file mode 100644
index 0000000000..bd002fb53f
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/admonitions.css
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.admonition h5 {
+ margin-top: 0;
+ margin-bottom: 8px;
+ text-transform: uppercase;
+}
+
+.admonition-icon {
+ display: inline-block;
+ vertical-align: middle;
+ margin-right: 0.4em;
+}
+
+.admonition-icon svg {
+ display: inline-block;
+ width: 22px;
+ height: 22px;
+ stroke-width: 0;
+ fill: var(--ifm-alert-emphasis-color);
+ stroke: var(--ifm-alert-emphasis-color);
+}
+
+.admonition-content > :last-child {
+ margin-bottom: 0;
+}
+
+.admonition {
+ margin-bottom: 1em;
+}
diff --git a/packages/docusaurus-theme-classic/src/index.ts b/packages/docusaurus-theme-classic/src/index.ts
index 9b9fc4347f..af700484d8 100644
--- a/packages/docusaurus-theme-classic/src/index.ts
+++ b/packages/docusaurus-theme-classic/src/index.ts
@@ -145,6 +145,7 @@ export default function docusaurusThemeClassic(
const modules = [
require.resolve(getInfimaCSSFile(direction)),
path.resolve(__dirname, './prism-include-languages'),
+ path.resolve(__dirname, './admonitions.css'),
];
if (customCss) {
diff --git a/website/docs/guides/markdown-features/markdown-features-admonitions.mdx b/website/docs/guides/markdown-features/markdown-features-admonitions.mdx
index 886b518559..ccd7ae68ff 100644
--- a/website/docs/guides/markdown-features/markdown-features-admonitions.mdx
+++ b/website/docs/guides/markdown-features/markdown-features-admonitions.mdx
@@ -11,61 +11,61 @@ Example:
:::note
- The content and title *can* include markdown.
+ Some **content** with _markdown_ `syntax`. Check [this `api`](#).
:::
- :::tip You can specify an optional title
+ :::tip
- Heads up! Here's a pro-tip.
+ Some **content** with _markdown_ `syntax`. Check [this `api`](#).
:::
:::info
- Useful information.
+ Some **content** with _markdown_ `syntax`. Check [this `api`](#).
:::
:::caution
- Warning! You better pay attention!
+ Some **content** with _markdown_ `syntax`. Check [this `api`](#).
:::
:::danger
- Danger danger, mayday!
+ Some **content** with _markdown_ `syntax`. Check [this `api`](#).
:::
:::note
-The content and title _can_ include markdown.
+Some **content** with _markdown_ `syntax`. Check [this `api`](#).
:::
-:::tip You can specify an optional title
+:::tip
-Heads up! Here's a pro-tip.
+Some **content** with _markdown_ `syntax`. Check [this `api`](#).
:::
:::info
-Useful information.
+Some **content** with _markdown_ `syntax`. Check [this `api`](#).
:::
:::caution
-Warning! You better pay attention!
+Some **content** with _markdown_ `syntax`. Check [this `api`](#).
:::
:::danger
-Danger danger, mayday!
+Some **content** with _markdown_ `syntax`. Check [this `api`](#).
:::
@@ -75,12 +75,61 @@ You may also specify an optional title
:::note Your Title
- The content and title *can* include markdown.
+ Some **content** with _markdown_ `syntax`.
:::
:::note Your Title
-The content and title _can_ include Markdown.
+Some **content** with _markdown_ `syntax`.
+
+:::
+
+## Admonitions with MDX
+
+You can use MDX inside admonitions too!
+
+```mdx
+import Tabs from '@theme/Tabs';
+
+import TabItem from '@theme/TabItem';
+
+:::tip Use tabs in admonitions
+
+
+ This is an apple 🍎
+ This is an orange 🍊
+ This is a banana 🍌
+
+
+:::
+```
+
+```mdx-code-block
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+```
+
+:::tip Use tabs in admonitions
+
+```mdx-code-block
+
+ This is an apple 🍎
+ This is an orange 🍊
+ This is a banana 🍌
+
+```
:::
diff --git a/yarn.lock b/yarn.lock
index 2a69a5e0c1..786e7496f7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11062,10 +11062,10 @@ infer-owner@^1.0.3, infer-owner@^1.0.4:
resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
integrity sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==
-infima@0.2.0-alpha.26:
- version "0.2.0-alpha.26"
- resolved "https://registry.yarnpkg.com/infima/-/infima-0.2.0-alpha.26.tgz#8582d40ef01a09dbbde8f0e574f8c61d6bc0992b"
- integrity sha512-0/Dt+89mf8xW+9/hKGmynK+WOAsiy0QydVJL0qie6WK57yGIQv+SjJrhMybKndnmkZBQ+Vlt0tWPnTakx8X2Qw==
+infima@0.2.0-alpha.27:
+ version "0.2.0-alpha.27"
+ resolved "https://registry.yarnpkg.com/infima/-/infima-0.2.0-alpha.27.tgz#f61bfee412640cebb4c867e11d2e53af4f36f9d5"
+ integrity sha512-3wzGnP8glFhxCSK0xLMtOoT0M/8fQGScu7yPmgGEMjTdw392GzEwaZW5FOH13z1qC1N57NBia+CVnKKw86kSMg==
inflight@^1.0.4:
version "1.0.6"