✨ feat: add admonition functionality and markdown-extended-features article, improve blockquote styling

src/content/posts/guides/Markdown Extended Features-zh.md

@@ -0,0 +1,73 @@
+---
+title: Markdown 扩展功能
+published: 2025-04-25
+tags:
+  - 指南
+toc: false
+lang: zh
+abbrlink: markdown-extended-features
+---
+
+以下是 Retypeset 主题的 Markdown 扩展功能，包括语法示例与样式效果。
+
+## 提示块
+
+使用容器指令 `:::type` 或 GitHub 语法 `> [!TYPE]`，即可创建提示块。支持以下五种类型：`note`、`tip`、`important`、`warning` 和 `caution`。
+
+### 语法
+
+```
+:::note
+Useful information that users should know, even when skimming content.
+:::
+
+> [!NOTE]
+> Useful information that users should know, even when skimming content.
+
+:::note{title="YOUR CUSTOM TITLE"}
+This is a note with a custom title.
+:::
+```
+
+### 效果
+
+> [!NOTE]
+> Useful information that users should know, even when skimming content.
+
+> [!TIP]
+> Helpful advice for doing things better or more easily.
+
+> [!IMPORTANT]
+> Key information users need to know to achieve their goal.
+
+:::warning
+Urgent info that needs immediate user attention to avoid problems.
+:::
+
+:::caution
+Advises about risks or negative outcomes of certain actions.
+:::
+
+:::note{title="YOUR CUSTOM TITLE"}
+This is a note with a custom title.
+:::
+
+## 图注
+
+使用 Markdown 图像语法 `![alt](src)`，**且上下均为空行**，即可自动生成图注。在 `alt` 前添加下划线 `_` 或留空 alt，即可隐藏图注。
+
+### 显示图注
+
+```
+
+![图片描述](./full/or/relative/path/of/image)
+
+```
+
+### 隐藏图注
+
+```
+![_图片描述](./full/or/relative/path/of/image)
+
+![](./full/or/relative/path/of/image)
+```

src/content/posts/guides/Markdown Style Guide-en.md

@@ -60,7 +60,7 @@ To add an image, add an exclamation mark `!`, followed by alt text in brackets `
 
 ### Syntax
 
-```markdown
+```
 ![Image Description](./full/or/relative/path/of/image)
 ```
 
@@ -228,7 +228,7 @@ Including `<sup>` superscript, `<sub>` subscript, `<abbr>` abbreviation, `<del>`
 
 ### Syntax
 
-```markdown
+```html
 H<sub>2</sub>O
 
 X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>

src/content/posts/guides/Markdown Style Guide-es.md

@@ -60,7 +60,7 @@ Para agregar una imagen, añada un signo de exclamación `!`, seguido de texto a
 
 ### Sintaxis
 
-```markdown
+```
 ![Descripción de la Imagen](./full/or/relative/path/of/image)
 ```
 
@@ -228,7 +228,7 @@ Incluyendo superíndice `<sup>`, subíndice `<sub>`, abreviatura `<abbr>`, tacha
 
 ### Sintaxis
 
-```markdown
+```html
 H<sub>2</sub>O
 
 X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>

src/content/posts/guides/Markdown Style Guide-ja.md

@@ -60,7 +60,7 @@ abbrlink: markdown-style-guide
 
 ### 構文
 
-```markdown
+```
 ![画像の説明](./full/or/relative/path/of/image)
 ```
 
@@ -228,7 +228,7 @@ abbrlink: markdown-style-guide
 
 ### 構文
 
-```markdown
+```html
 H<sub>2</sub>O
 
 X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>

src/content/posts/guides/Markdown Style Guide-ru.md

@@ -60,7 +60,7 @@ Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sap
 
 ### Синтаксис
 
-```markdown
+```
 ![Описание изображения](./full/or/relative/path/of/image)
 ```
 
@@ -228,7 +228,7 @@ Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sap
 
 ### Синтаксис
 
-```markdown
+```html
 H<sub>2</sub>O
 
 X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>

src/content/posts/guides/Markdown Style Guide-zh-tw.md

@@ -60,7 +60,7 @@ abbrlink: markdown-style-guide
 
 ### 語法
 
-```markdown
+```
 ![圖片描述](./full/or/relative/path/of/image)
 ```
 
@@ -228,7 +228,7 @@ abbrlink: markdown-style-guide
 
 ### 語法
 
-```markdown
+```html
 H<sub>2</sub>O
 
 X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>

src/content/posts/guides/Markdown Style Guide-zh.md

@@ -60,7 +60,7 @@ abbrlink: markdown-style-guide
 
 ### 语法
 
-```markdown
+```
 ![图片描述](./full/or/relative/path/of/image)
 ```
 
@@ -228,7 +228,7 @@ abbrlink: markdown-style-guide
 
 ### 语法
 
-```markdown
+```html
 H<sub>2</sub>O
 
 X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>

src/plugins/remark-admonitions.mjs

@@ -0,0 +1,66 @@
+import { visit } from 'unist-util-visit'
+
+const ADMONITION_TYPES = {
+  note: 'NOTE',
+  tip: 'TIP',
+  important: 'IMPORTANT',
+  warning: 'WARNING',
+  caution: 'CAUTION',
+}
+
+const GITHUB_ADMONITION_REGEX = new RegExp(
+  `^\\s*\\[!(${Object.values(ADMONITION_TYPES).join('|')})\\]\\s*`,
+  'i',
+)
+
+export function remarkAdmonitions() {
+  return (tree) => {
+    // Create an admonition blockquote
+    function createAdmonition(node, type, title) {
+      const titleSpan = `<span class="admonition-title">${title}</span>`
+
+      node.data = node.data || {}
+      node.data.hName = 'blockquote'
+      node.data.hProperties = {
+        className: `admonition-${type}`,
+      }
+
+      node.children.unshift({
+        type: 'html',
+        value: titleSpan,
+      })
+    }
+
+    // Handle :::type syntax
+    visit(tree, 'containerDirective', (node) => {
+      const type = node.name
+      if (!ADMONITION_TYPES[type])
+        return
+
+      const title = node.attributes?.title || ADMONITION_TYPES[type]
+      createAdmonition(node, type, title)
+    })
+
+    // Handle > [!TYPE] syntax
+    visit(tree, 'blockquote', (node) => {
+      if (!node.children?.length || node.children[0].type !== 'paragraph')
+        return
+
+      const paragraph = node.children[0]
+      if (!paragraph.children?.length || paragraph.children[0].type !== 'text')
+        return
+
+      const textNode = paragraph.children[0]
+      const match = textNode.value.match(GITHUB_ADMONITION_REGEX)
+      if (!match)
+        return
+
+      const type = match[1].toLowerCase()
+      const title = ADMONITION_TYPES[type]
+
+      textNode.value = textNode.value.substring(match[0].length)
+
+      createAdmonition(node, type, title)
+    })
+  }
+}

src/styles/heti.css

@@ -115,7 +115,19 @@ html.dark .heti pre :where(span) {
 
 /* Blockquotes */
 .heti :where(blockquote) {
-  --at-apply: 'mt-3 mb-6 px-4 c-secondary/80 border-l-4 border-solid border-secondary/15';
+  --at-apply: 'mt-3 mb-6 px-4 py-0.5 c-secondary/80 border-l-4 border-solid border-secondary/25';
+}
+.heti blockquote blockquote {
+  --at-apply: 'py-0';
+}
+.heti blockquote p {
+  --at-apply: 'mb-3';
+}
+.heti blockquote > :first-child {
+  --at-apply: 'mt-0';
+}
+.heti blockquote > :last-child {
+  --at-apply: 'mb-0';
 }
 
 /* Tables */
@@ -216,7 +228,7 @@ html.dark .heti sup:target,
 html.dark .heti sup a:target {
   --at-apply: 'text-background';
 }
-.heti :where(.data-footnote-backref) {
+.heti .data-footnote-backref {
   --at-apply: 'no-underline font-serif';
 }
 
@@ -246,14 +258,58 @@ html.dark .heti sup a:target {
 }
 
 /* KaTeX Mathematical */
-.heti :where(.katex-display) {
+.heti .katex-display {
   --at-apply: 'block max-w-full overflow-x-auto overflow-y-hidden scrollbar-hidden';
 }
-.heti :where(.katex-display)::-webkit-scrollbar {
+.heti .katex-display::-webkit-scrollbar {
   display: none;
 }
 
-/* Markdown Extensions Style >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
+/* Markdown Extended Features >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
+.heti .admonition-title {
+  --at-apply: 'font-semibold';
+}
+
+/* Note */
+.heti .admonition-note {
+  --at-apply: 'border-note';
+}
+.heti .admonition-note .admonition-title {
+  --at-apply: 'c-note';
+}
+
+/* Tip */
+.heti .admonition-tip {
+  --at-apply: 'border-tip';
+}
+.heti .admonition-tip .admonition-title {
+  --at-apply: 'c-tip';
+}
+
+/* Important */
+.heti .admonition-important {
+  --at-apply: 'border-important';
+}
+.heti .admonition-important .admonition-title {
+  --at-apply: 'c-important';
+}
+
+/* Warning */
+.heti .admonition-warning {
+  --at-apply: 'border-warning';
+}
+.heti .admonition-warning .admonition-title {
+  --at-apply: 'c-warning';
+}
+
+/* Caution */
+.heti .admonition-caution {
+  --at-apply: 'border-caution';
+}
+.heti .admonition-caution .admonition-title {
+  --at-apply: 'c-caution';
+}
+
 /* .heti :where(details) {
   --at-apply: 'my-4 px-4 py-3 border border-solid border-secondary/25 rounded cursor-pointer';
 }