Support highlight blockquote

packages/duoyun-ui/docs/en/01-guide/04-accessible.md

@@ -3,8 +3,7 @@
 DuoyunUI has accessibility support: reference [ARIA 1.3](https://w3c.github.io/aria/#role_definitions) defines roles and status, use a semantic tag,
 in addition, there is also a keyboard access support, you can use the keyboard <kbd>Tab</kbd>, <kbd>Space</kbd>, <kbd>Esc</kbd> key to navigate, operate.
 
-> Shortcut support
->
+> [!Shortcut support]
 > DuoyunUI has a built-in simple [hotkeys](https://github.com/greena13/react-hotkeys) to implement keyboard access,
 > you can use it to make custom shortcut bindings:
 >
@@ -17,8 +16,7 @@ in addition, there is also a keyboard access support, you can use the keyboard <
 >
 > _If the global shortcut binding is performed in a custom element, remember to unbinding when the element is unmount!_
 
-> Vim mode support
->
+> [!Vim mode support]
 > DuoyunUI has a [`<dy-keyboard-access>`](../02-elements/keyboard-access.md) element, similar([Vimperator](http://vimperator.org/)),
 > <kbd>h</kbd>, <kbd>j</kbd>, <kbd>k</kbd>, <kbd>l</kbd> scroll page,<kbd>f</kbd> list all focusable elements, then press the corresponding key to focus on this element and click
 
@@ -53,9 +51,9 @@ when you click the pointer event, it is not necessary to display the focus ring,
 In DuoyunUI or other custom elements, this CSS is not always useful(not support ShadowDOM), so DuoyunUI provides a shared style, you can reference the style when you need the focus ring:
 
 ```ts
-import { fcousStyle } from 'duoyun-ui/lib/styles';
+import { focusStyle } from 'duoyun-ui/lib/styles';
 
 @customElement('my-ele')
-@adpotStyle(fcousStyle)
+@adoptedStyle(focusStyle)
 export class MyEleElement extends GemElement {}
 ```

packages/duoyun-ui/docs/zh/01-guide/04-accessible.md

@@ -3,8 +3,7 @@
 DuoyunUI 有部分可访问性支持：元素参考 [ARIA 1.3](https://w3c.github.io/aria/#role_definitions) 定义角色和状态，使用语义化标签，
 另外，还具备键盘访问支持，你可以利用键盘 <kbd>Tab</kbd>, <kbd>Space</kbd>, <kbd>Esc</kbd> 键即可导航、操作。
 
-> 快捷键支持
->
+> [!快捷键支持]
 > DuoyunUI 自带一个简易的 [hotkeys](https://github.com/greena13/react-hotkeys) 以实现键盘访问，
 > 你可以利用它来进行自定义快捷键绑定：
 >
@@ -17,8 +16,7 @@ DuoyunUI 有部分可访问性支持：元素参考 [ARIA 1.3](https://w3c.githu
 >
 > _如果在自定义元素中进行全局快捷键绑定，记得在元素卸载时解除绑定！_
 
-> 全键盘支持
->
+> [!全键盘支持]
 > DuoyunUI 包含一个 [`<dy-keyboard-access>`](../02-elements/keyboard-access.md) 元素，它能让你的应用具备全键盘支持，类似（[Vimperator](http://vimperator.org/)），
 > <kbd>h</kbd>, <kbd>j</kbd>, <kbd>k</kbd>, <kbd>l</kbd> 滚动页面，<kbd>f</kbd> 标记应用当前可见可聚焦元素，然后按下相应的键即可聚焦该元素并点击
 

packages/gem-book/docs/en/002-guide/007-extension.md

@@ -53,6 +53,18 @@ By default, hash is generated based on the title text field, but sometimes you n
 ### Fixed heading anchor hash {#fixed-hash}
 ```
 
+### Highlight blockquote
+
+```md
+> [!TIP]
+> This is [highlight blockquote](https://github.com/orgs/community/discussions/16925)
+```
+
+> [!TIP]
+> This is [highlight blockquote](https://github.com/orgs/community/discussions/16925)
+
+Support for `[!NOTE]`, `[!TIP]`, `[!IMPORTANT]`, `[!WARNING]` and `[!CAUTION]`.
+
 ## Parts
 
 [Part](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part) allows you to customize the internal style of `<gem-book>`, for example:

packages/gem-book/docs/zh/002-guide/007-extension.md

@@ -53,6 +53,18 @@ _文件名只工作在 `<gbp-sandpack>` 中；高亮并非指代码语法高亮_
 ### 固定标题锚 Hash {#fixed-hash}
 ```
 
+### 高亮引用块
+
+```md
+> [!TIP]
+> 这是[高亮引用块](https://github.com/orgs/community/discussions/16925)
+```
+
+> [!TIP]
+> 这是[高亮引用块](https://github.com/orgs/community/discussions/16925)
+
+支持 `[!NOTE]`, `[!TIP]`, `[!IMPORTANT]`, `[!WARNING]` 和 `[!CAUTION]`。
+
 ## Parts
 
 [Part](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part) 能让你自定义 `<gem-book>` 的内部样式，例如：
@@ -81,7 +93,7 @@ gem-book::part(homepage-hero) {
 gem-book docs --plugin raw
 ```
 
-or
+或
 
 ```html
 <script type="module" src="https://unpkg.com/gem-book/plugins/raw.js"></script>

packages/gem-book/src/element/elements/main.ts

@@ -157,21 +157,36 @@ export class Main extends GemElement {
           max-width: 100%;
         }
         blockquote {
-          background: rgba(${theme.textColorRGB}, 0.05);
-          border-left: 0.5rem solid rgba(${theme.textColorRGB}, 0.05);
+          --highlight: ${theme.textColorRGB};
+          background: rgba(var(--highlight), 0.05);
+          border-left: 0.5rem solid rgba(var(--highlight), 0.05);
           margin: 1.2em 0;
           padding: 0.8em 1em;
         }
-        blockquote p {
+        blockquote.note {
+          --highlight: 9, 105, 218;
+        }
+        blockquote.tip {
+          --highlight: 26, 127, 55;
+        }
+        blockquote.important {
+          --highlight: 130, 80, 223;
+        }
+        blockquote.warning {
+          --highlight: 154, 103, 0;
+        }
+        blockquote.caution {
+          --highlight: 209, 36, 47;
+        }
+        blockquote > .title {
+          font-weight: bold;
+          color: rgb(var(--highlight));
+        }
+        blockquote > p {
           margin: 0.5em 0 0;
         }
         blockquote > :first-child {
           margin-top: 0;
-          font-weight: bold;
-        }
-        blockquote > :nth-child(n + 2),
-        blockquote > :last-child {
-          font-weight: normal;
         }
         kbd {
           font-family: monospace;

packages/gem-book/src/element/lib/renderer.ts

@@ -16,8 +16,17 @@ export function getRenderer({ lang, link, displayRank }: { lang: string; link: s
     return `<${tag} class="markdown-header" id="${id}"><a class="header-anchor" aria-hidden="true" href="#${id}">${anchorIcon}</a>${text}</${tag}>`;
   };
 
-  renderer.code = (code, infostring) => {
-    const [lang, ...rest] = infostring?.split(/\s+/) || [];
+  renderer.blockquote = (quote) => {
+    let type = '';
+    const q = quote.replace(/^<p>\[!(.*)\]/, (_str, $1) => {
+      type = $1;
+      return `<p class="title">${$1}</p><p>`;
+    });
+    return `<blockquote class="${type.toLowerCase()}">${q}</blockquote>`;
+  };
+
+  renderer.code = (code, infoString) => {
+    const [lang, ...rest] = infoString?.split(/\s+/) || [];
     const lastArg = rest.pop();
     const lastArgIsHighlight = lastArg && /^([-]|\d|\s|,)+$/.test(lastArg);
     const highlight = lastArgIsHighlight ? lastArg : '';

packages/gem/docs/en/001-guide/002-advance/005-i18n.md

@@ -117,10 +117,9 @@ const i18n = new I18n({
 });
 ```
 
-> Tip:
->
+> [!TIP]
 > When `urlParamsType` is `path`, then the links in the page and the [`history`](../../003-api/004-history) routing switch need to be modified,
-> this operation can be defined globally by setting `histroy.basePath`:
+> this operation can be defined globally by setting `history.basePath`:
 >
 > ```ts
 > new I18n({

packages/gem/docs/en/004-blog/005-improve-route.md

@@ -31,23 +31,23 @@ html`
     @route-change=${onChange}
     @loading=${onLoading}
   ></gem-route>
-`
+`;
 ```
 
-> Tip:
+> [!Tip]
 >
 > `route-change`, `loading` events of `<gem-route>` allow you to add a progress bar for page loading
-> 
-Read URL parameters from `locationStore` in pages to prevent unnecessary updates to old pages that are not unloaded:
+>
+> Read URL parameters from `locationStore` in pages to prevent unnecessary updates to old pages that are not unloaded:
 
 ```ts
 @customElement('my-element')
 @connectStore(locationStore)
 class MyElement extends GemElement {
   render = () => {
-    return html`${locationStore.query}`
-  }
+    return html`${locationStore.query}`;
+  };
 }
 ```
 
-Now you have a better user experience for your app routing switch.
+Now you have a better user experience for your app routing switch.

packages/gem/docs/zh/001-guide/002-advance/005-i18n.md

@@ -117,10 +117,9 @@ const i18n = new I18n({
 });
 ```
 
-> 提示：
->
+> [!TIP]
 > 当 `urlParamsType` 为 `path`，那么页面中的链接、[`history`](../../003-api/004-history) 路由切换都需要修改，
-> 可以通过设置 `histroy.basePath` 来全局定义此操作：
+> 可以通过设置 `history.basePath` 来全局定义此操作：
 >
 > ```ts
 > new I18n({

packages/gem/docs/zh/004-blog/005-improve-route.md

@@ -31,10 +31,10 @@ html`
     @route-change=${onChange}
     @loading=${onLoading}
   ></gem-route>
-`
+`;
 ```
 
-> 提示：
+> [!TIP]
 >
 > `<gem-route>` 的 `route-change`, `loading` 事件允许你添加页面加载的进度条
 
@@ -45,9 +45,9 @@ html`
 @connectStore(locationStore)
 class MyElement extends GemElement {
   render = () => {
-    return html`${locationStore.query}`
-  }
+    return html`${locationStore.query}`;
+  };
 }
 ```
 
-现在，你已经为你的应用路由切换提供了更好的用户体验。
+现在，你已经为你的应用路由切换提供了更好的用户体验。