feat: global custom container header

[djdjz7]

As mentioned in #3041 , this comment adds global custom container header entry.
Usage:

// config.ts
export default defineConfig({
// ...
  markdown: {
    math: true,
    container: {
      tipLabel: "提示",
      warningLabel: "警告",
      dangerLabel: "危险",
      infoLabel: "信息",
      detailsLabel: "详细信息"
    }
  },
// ...
})

[pberto]

Hi @brc-dd, @djdjz7

I'd like to suggest some improvements here.

The default behavior of custom boxes is that if you type:

:::info
blah blah
:::

A custom box with the default label INFO (or with the "custom default label" provided by this very new feature in config.ts) will be rendered.

Now, I just tried to use this feature and instead of a custom label text use an icon, this works too:

  markdown: {
    math: true,
    container: {
      infoLabel: '<iconify-icon icon="jam:info" />'
    }
  }

But what I believe we should really have is both behaviors, that is being able to use a custom label icon but still be able to append words for the title in markdown to obtain:

pseudo md code:

:::info info
blah blah
:::

:::danger Windows Threading
blah blah
:::

Currently the only way to obtain this is doing the following (which is ugly):

:::info <iconify-icon icon="jam:info" /> Info 
blah blah
:::

:::danger <iconify-icon icon="jam:triangle-danger" /> Windows Threading 
blah blah
:::

So to recap this feature should be designed this way:

// ...
  markdown: {
    math: true,
    container: {
      infoLabel: "信息", // default is INFO when not specified
      infoIcon": "ⓘ" // default is empty string when not specified
    }
  },
// ...

This will allow to produce:

:::info --> INFO (where the default INFO can be overridden in config)
:::info MyInfo --> MyInfo (where the default INFO is overridden with MyInfo inline)
:::info --> ⓘ (where ⓘ was defined in config)
:::info Myinfo --> ⓘ MyInfo (where ⓘ was defined in config and the default INFO is overridden with MyInfo inline)

Last but not least I believe when an icon is specified text should be indented this way (I am trying to find where this could be defined btw...)

[brc-dd]

Visual indicators should be added via CSS not markdown.

[brc-dd]

Refer https://github.com/vuejs/theme/blob/HEAD/src/core/styles/vt-doc-custom-blocks.css (change vt-doc to vp-doc)

[pberto]

Ok , I solved it with css.