I think we need strict match the callout tags in case of users use something like ![DUCK] in some reason.
And we have no callout class to handle it either.

This was intentional. :)

Callouts (or "admonitions" or "alerts") are found in many other apps and the list of callouts supported is often much larger than what GitHub supports. By capturing the string contained with the brackets ([!STRING]) and using it as a separate styling-only class (<div class="callout string">) it simplified adding new callouts for third parties.

For example:

> [!BUG]
> This is a bug callout

.callout.bug {
  --callout-bg: orange;
}

I see. so it means the ![words] is a callout syntax hook (I think I can call it as an reserved word/block) in docsify and users could do the extension.Meanwhile, it will disable to allow user uses a ![not-callout] as a plain start of blockquote.

> [!question] Should we mention it in `UI-KIT`?
> > [!advantage] users can understand there is a way to do extension for callout block (so am I xD ).
> > > [!example]  or we could also add an example.

Correct.

The .callout class handles all of the base styling. The additional class on the callout element (.caution, .important, .note, etc.) is used to adjust styles like colors and icons. To extend the system to support the example you provided above they would simply need to create CSS declarations for each:

callout.question {
  --callout-bg: red;
  --callout-color: white;
}

I can add a note about custom classes to the docs along with a note explaining that in most cases custom classes will not work outside of Docsify.

great!

I can add a note about custom classes to the docs along with a note explaining that in most cases custom classes will not work outside of Docsify.

Hi, @jhildenbiddle Do you still need to modify the document? If not, then you can merge this PR.

@sy-records Yep. Haven't had a chance to complete the updated docs, but I'll have that in the next or two.

@Koooooo-7 @sy-records --

One other enhancements I'd like to make is the ability to define localized labels. I make a conscious decision to not implement this initially for a few reasons, but after thinking it over for a bit I've decided it makes sense to offer this feature.

The implementation will follow the same pattern we've used elsewhere in our configuration. The default behavior will be to not render text labels (as shown in screenshots above):

window.$docsify = {
  // Default: do not render text labels
  callouts: {},
};

If users want to render text labels automatically as is done in markdown environments like GitHub and Obsidian, they can define them as part of their configuration:

window.$docsify = {
  // Render same label for all route paths
  callouts: {
    caution: 'Caution',
    important: 'Important',
    note: 'Note',
    tip: 'Tip',
    warning: 'Warning',
  },
};

window.$docsify = {
  // Render localized labels based on route paths
  callouts: {
    caution: {
      '/es/': 'Precaución',
      '/de-de/': 'Vorsicht',
      '/ru-ru/': 'Осторожность',
      '/zh-cn/': '警告',
      '/': 'Caution',
    },
    // ...
  },
};

----- @jhildenbiddle , Currently, we simply add a icon per callout config. That looks good to me.

I don't propose that we need introduce a label into docsify with the i18n support either:

• We need extract the content from the [!HERE] and match it to the $.callouts config by path and by content.
  i.e. if user has the ![example], they absolutely want to config it like this:

window.$docsify = {
  // Render same label for all route paths
  callouts: {
    example: {
      '/zh-cn/': '例子',
      '/': 'Example',
    },
  },

It makes the config more complex and messy, they need config options size is: i18n-paths * callouts.

IMO, the icon already has the info, we don't need mention it specially with a label.
In a common sense, a light lamp is tips, a i is info/note, a red thing is forbidden/attention, a yellow triangle is warning. user can simply use it as it default meanings.

The only different thing is we introduce some icon more docsify style (such as important is a cute star.). thats fine since we don't fu*k any things up.

If user do wanna enrich the label in their multi lang sites for each icon, they can simply add something like this:

• > [!IMPORTANT] **Important** in EN site.
• > [!IMPORTANT] **重要** in ZH site.

Besides.
We don't need stuck in the [!IMPORTANT] is an IMPORTANT icon.
User can treat the [!SOMEKEY] just a tag or a snytax that docsify would provide some callout icons.

Which means, user could just know something like:

If you config the [!TIP], docsify will give a lamp.

Then, they can append all the extra info for the icon they want or fully "rename" them.
No matter user is an EN speaker or not and how they categorize the icons in their site with their customized icon and docsify builtin icons.

> [!IMPORTANT] **Bonus Time** When you see the Star icon, it means we brings you bonus surprise now!