From 03d02d1b38b57a58bf05aaa0bf79cabb6cb45532 Mon Sep 17 00:00:00 2001
From: Breno A <github@brenoepic.tech>
Date: Sat, 24 Feb 2024 22:42:46 -0300
Subject: [PATCH] docs: custom containers

---
 docs/guide/markdown.md | 45 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/docs/guide/markdown.md b/docs/guide/markdown.md
index d5b68de6..4e4a866a 100644
--- a/docs/guide/markdown.md
+++ b/docs/guide/markdown.md
@@ -176,6 +176,51 @@ This is a dangerous warning.
 This is a details block.
 :::
 
+### Custom Container
+
+You may set custom containers globally by adding the following content in site config:
+
+```ts
+// config.ts
+export default defineConfig({
+  // ...
+  markdown: {
+    container: {
+      //...
+      customContainers: {
+        example: 'Example Label'
+      }
+    }
+  }
+  // ...
+})
+```
+
+And add your custom style:
+
+```css
+/* override.css */
+.custom-block.example {
+  border-color: var(--vp-c-brand-1);
+  color: var(--vp-c-brand-2);
+  background-color: var(--vp-c-brand-3);
+}
+
+.custom-block.example a,
+.custom-block.example code {
+  color: var(--vp-c-brand-1);
+}
+
+.custom-block.example a:hover,
+.custom-block.example a:hover > code {
+  color: var(--vp-c-brand-2);
+}
+
+.custom-block.example code {
+  background-color: var(--vp-c-brand-1);
+}
+```
+
 ### Custom Title
 
 You may set custom title by appending the text right after the "type" of the container.