Admonition

HowTo

Swizzle

npm

npm run swizzle @docusaurus/theme-classic Admonition --eject

Yarn

yarn swizzle @docusaurus/theme-classic Admonition --eject

pnpm

pnpm run swizzle @docusaurus/theme-classic Admonition --eject

Bun

bun run swizzle @docusaurus/theme-classic Admonition --eject

Security.tsx

Create File Security.tsx into Path: src/theme/Admonition/Type/Security.tsx:

import React, {type ReactNode} from 'react';
import clsx from 'clsx';
import Translate from '@docusaurus/Translate';
import type {Props} from '@theme/Admonition/Type/Info';
import AdmonitionLayout from '@theme/Admonition/Layout';
import IconInfo from '@theme/Admonition/Icon/Info';
import { Icon } from '@iconify/react';

const infimaClassName = 'alert alert--security';

const defaultProps = {
    icon: <Icon icon="line-md:security-twotone" />,
    title: (
        <Translate
        id="theme.admonition.security"
        description="The default label used for the Security admonition (:::security)">
        Security
        </Translate>
    ),
};

export default function AdmonitionTypeSecurity(props: Props): ReactNode {
    return (
        <AdmonitionLayout
        {...defaultProps}
        {...props}
        className={clsx(infimaClassName, props.className)}>
        {props.children}
        </AdmonitionLayout>
    );
}

Types.tsx

Change File Types.tsx in Path: src/theme/Admonition/Types.tsx

add AdmonitionTypeSecurity

import React from 'react';
import AdmonitionTypeNote from '@theme/Admonition/Type/Note';
import AdmonitionTypeTip from '@theme/Admonition/Type/Tip';
import AdmonitionTypeInfo from '@theme/Admonition/Type/Info';
import AdmonitionTypeWarning from '@theme/Admonition/Type/Warning';
import AdmonitionTypeDanger from '@theme/Admonition/Type/Danger';
import AdmonitionTypeCaution from '@theme/Admonition/Type/Caution';
import AdmonitionTypeSecurity from '@theme/Admonition/Type/Security';
import type AdmonitionTypes from '@theme/Admonition/Types';

const admonitionTypes: typeof AdmonitionTypes = {
    note: AdmonitionTypeNote,
    tip: AdmonitionTypeTip,
    info: AdmonitionTypeInfo,
    warning: AdmonitionTypeWarning,
    danger: AdmonitionTypeDanger,
    security: AdmonitionTypeSecurity,
};

// Undocumented legacy admonition type aliases
// Provide hardcoded/untranslated retrocompatible label
// See also https://github.com/facebook/docusaurus/issues/7767
const admonitionAliases: typeof AdmonitionTypes = {
    secondary: (props) => <AdmonitionTypeNote title="secondary" {...props} />,
    important: (props) => <AdmonitionTypeInfo title="important" {...props} />,
    success: (props) => <AdmonitionTypeTip title="success" {...props} />,
    caution: AdmonitionTypeCaution,
};

export default {
    ...admonitionTypes,
    ...admonitionAliases,
};

Best Practice

better simplify your Types.tsx to this:

import React from 'react';
import DefaultAdmonitionTypes from '@theme-original/Admonition/Types';
import AdmonitionTypeSecurity from '@theme/Admonition/Type/Security';

const AdmonitionTypes = {
    ...DefaultAdmonitionTypes,
    security: AdmonitionTypeSecurity,
};

export default AdmonitionTypes;

docusaurus.config

It has to be added to docs, blog and pages in presets

const config = {
    presets: [
        [
            'classic',
            /** @type {import('@docusaurus/preset-classic').Options} */
            ({
                docs: {
                    ...
                    admonitions: {
                        keywords: ['security'],
                        extendDefaults: true,
                    },
                },
                blog: {
                    ...
                    admonitions: {
                        keywords: ['security'],
                        extendDefaults: true,
                    },
                },
                pages: {
                    ...
                    admonitions: {
                        keywords: ['security'],
                        extendDefaults: true,
                    },
                },
            })
        ],
    ],
}

docs.mdx

:::security

This is a security warning

:::

:::security[collapse|Mehr Infos]

This is a security warning

:::

:::security[Mehr Infos]

This is a security warning

:::

Output

hinweis

Some content with Markdown note. Check this api.

ℹ️

Collapsible Note

ℹ️Mehr Infos

Inhalt

Summary

Some content with Markdown summary. Check this api.

Some content with Markdown abstract. Check this api.

Mehr Infos

Some content with Markdown abstract. Check this api.

Mehr Infos

Some content with Markdown abstract. Check this api.

info

Some content with Markdown info. Check this api.

tipp

Some content with Markdown tip. Check this api.

success

Some content with Markdown success. Check this api.

Question

Some content with Markdown question. Check this api.

warnung

Some content with Markdown warning. Check this api.

info

Some content with Markdown failure. Check this api.

gefahr

Some content with Markdown danger. Check this api.

Bug

Some content with Markdown bug. Check this api.

Example

Some content with Markdown example. Check this api.

Release

Some content with Markdown release. Check this api.

Security

Some content with Markdown security. Check this api.

Quote

Some content with Markdown quote. Check this api.

Trend

Some content with Markdown trend. Check this api.

vorsicht

Some content with Markdown caution. Check this api.

Some content with Markdown discord. Check this api.

docusaurus

Some content with Markdown docusaurus. Check this api.