本篇示例专用于验证与测试博客正文中的 代码块（Code Block Enhancements） 功能。
主题为所有代码块注入了 macOS 拟物交通灯控制条、语言徽章、增删行 Diff 对比、一键复制 以及 超长代码自动限高折叠。
一、带增删行对比的 Diff 代码块（Diff Highlighting）
在代码块中展示版本升级与配置变更时的增加行与删除行：
import { defineConfig } from 'astro/config';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';
export default defineConfig({
site: 'https://shijian.us',
- output: 'server', // 旧的服务端渲染模式
+ output: 'static', // 升级为极速纯静态导出模式
markdown: {
+ remarkPlugins: [remarkMath], // 注入 KaTeX 公式解析
+ rehypePlugins: [rehypeKatex],
shikiConfig: {
themes: {
light: 'github-light',
dark: 'github-dark-dimmed',
},
},
},
});二、超长代码自动折叠演示（Code Collapse）
当代码行数过多时，主题会自动在高度超过 380px 时启用半透明遮罩与「展开代码」胶囊按钮：
{
"name": "shijianus-blog",
"version": "2.0.0",
"description": "基于 Astro 6 与安知鱼设计美学的高性能极客独立博客",
"author": "shijianus",
"license": "MIT",
"scripts": {
"dev": "astro dev --host 0.0.0.0",
"build": "BLOG_BUILD_TARGET=static PUBLIC_STATIC_EXPORT=1 astro build",
"preview": "astro preview",
"clean": "node scripts/clean.mjs"
},
"dependencies": {
"@astrojs/mdx": "^5.0.3",
"@astrojs/node": "^10.0.6",
"@astrojs/react": "^5.0.2",
"@tailwindcss/postcss": "^4.2.4",
"@tailwindcss/vite": "^4.2.2",
"astro": "^6.1.3",
"clsx": "^2.1.1",
"katex": "^0.16.11",
"lucide-react": "^0.460.0",
"mermaid": "^11.4.1",
"react": "^19.2.4",
"react-dom": "^19.2.4",
"rehype-katex": "^7.0.1",
"remark-gfm": "^4.0.1",
"remark-math": "^6.0.0",
"tailwind-merge": "^3.5.0",
"tailwindcss": "^4.2.2"
},
"devDependencies": {
"playwright": "^1.62.1",
"wrangler": "^4.85.0"
}
}Dieses Beispiel dient der Validierung und dem Testen der Codeblock-Erweiterungen im Blogbeitrag.
Das Theme integriert für alle Codeblöcke die macOS-Semafor-Steuerleiste, Sprach-Badges, Diff-Hervorhebung für hinzugefügte/gelöschte Zeilen, Ein-Klick-Kopieren und das automatische Zusammenklappen von überlangen Codeblöcken.
1. Diff-Codeblöcke mit Hinzufügungs-/Löschungs-Vergleich (Diff Highlighting)
Zeigt hinzugefügte und gelöschte Zeilen in Codeblöcken bei Versions-Upgrades und Konfigurationsänderungen an:
import { defineConfig } from 'astro/config';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';
export default defineConfig({
site: 'https://shijian.us',
- output: 'server', // Alter serverseitiger Rendering-Modus
+ output: 'static', // Upgrade auf den ultraschnellen statischen Exportmodus
markdown: {
+ remarkPlugins: [remarkMath], // KaTeX-Formel-Parsing injizieren
+ rehypePlugins: [rehypeKatex],
shikiConfig: {
themes: {
light: 'github-light',
dark: 'github-dark-dimmed',
},
},
},
});2. Demonstration des automatischen Code-Zusammenklappens (Code Collapse)
Wenn die Anzahl der Codezeilen zu groß ist, aktiviert das Theme automatisch eine halbtransparente Überlagerung und einen „Code erweitern“-Button, sobald die Höhe 380px überschreitet:
{
"name": "shijianus-blog",
"version": "2.0.0",
"description": "Ein hochperformanter, unabhängiger Geek-Blog basierend auf Astro 6 und der Designästhetik von Anzhiyu",
"author": "shijianus",
"license": "MIT",
"scripts": {
"dev": "astro dev --host 0.0.0.0",
"build": "BLOG_BUILD_TARGET=static PUBLIC_STATIC_EXPORT=1 astro build",
"preview": "astro preview",
"clean": "node scripts/clean.mjs"
},
"dependencies": {
"@astrojs/mdx": "^5.0.3",
"@astrojs/node": "^10.0.6",
"@astrojs/react": "^5.0.2",
"@tailwindcss/postcss": "^4.2.4",
"@tailwindcss/vite": "^4.2.2",
"astro": "^6.1.3",
"clsx": "^2.1.1",
"katex": "^0.16.11",
"lucide-react": "^0.460.0",
"mermaid": "^11.4.1",
"react": "^19.2.4",
"react-dom": "^19.2.4",
"rehype-katex": "^7.0.1",
"remark-gfm": "^4.0.1",
"remark-math": "^6.0.0",
"tailwind-merge": "^3.5.0",
"tailwindcss": "^4.2.2"
},
"devDependencies": {
"playwright": "^1.62.1",
"wrangler": "^4.85.0"
}
}This example article is dedicated to verifying and testing the Code Block Enhancements feature within the blog’s main content.
The theme injects macOS skeuomorphic traffic light controls, language badges, diff highlighting for added/removed lines, one-click copy, and automatic height-limited collapsing for excessively long code blocks into all code blocks.
1. Diff Code Blocks with Added/Removed Line Comparison (Diff Highlighting)
Demonstrates added and removed lines in code blocks during version upgrades and configuration changes:
import { defineConfig } from 'astro/config';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';
export default defineConfig({
site: 'https://shijian.us',
- output: 'server', // 旧的服务端渲染模式
+ output: 'static', // 升级为极速纯静态导出模式
markdown: {
+ remarkPlugins: [remarkMath], // 注入 KaTeX 公式解析
+ rehypePlugins: [rehypeKatex],
shikiConfig: {
themes: {
light: 'github-light',
dark: 'github-dark-dimmed',
},
},
},
});2. Automatic Long Code Block Collapse Demo (Code Collapse)
When a code block contains too many lines, the theme automatically enables a translucent overlay and an ‘Expand Code’ capsule button when its height exceeds 380px:
{
"name": "shijianus-blog",
"version": "2.0.0",
"description": "基于 Astro 6 与安知鱼设计美学的高性能极客独立博客",
"author": "shijianus",
"license": "MIT",
"scripts": {
"dev": "astro dev --host 0.0.0.0",
"build": "BLOG_BUILD_TARGET=static PUBLIC_STATIC_EXPORT=1 astro build",
"preview": "astro preview",
"clean": "node scripts/clean.mjs"
},
"dependencies": {
"@astrojs/mdx": "^5.0.3",
"@astrojs/node": "^10.0.6",
"@astrojs/react": "^5.0.2",
"@tailwindcss/postcss": "^4.2.4",
"@tailwindcss/vite": "^4.2.2",
"astro": "^6.1.3",
"clsx": "^2.1.1",
"katex": "^0.16.11",
"lucide-react": "^0.460.0",
"mermaid": "^11.4.1",
"react": "^19.2.4",
"react-dom": "^19.2.4",
"rehype-katex": "^7.0.1",
"remark-gfm": "^4.0.1",
"remark-math": "^6.0.0",
"tailwind-merge": "^3.5.0",
"tailwindcss": "^4.2.2"
},
"devDependencies": {
"playwright": "^1.62.1",
"wrangler": "^4.85.0"
}
}Este artículo de ejemplo está dedicado a la verificación y prueba de las funcionalidades de Mejoras en Bloques de Código dentro del cuerpo del blog.
El tema inyecta en todos los bloques de código: la barra de control de semáforos de macOS (skeuomorphic), insignias de lenguaje, comparación de diferencias de líneas (Diff), copia con un clic y plegado automático con límite de altura para código excesivamente largo.
1. Bloques de Código Diff con Comparación de Líneas Añadidas/Eliminadas (Diff Highlighting)
Muestra las líneas añadidas y eliminadas al actualizar versiones o cambiar configuraciones dentro de los bloques de código:
import { defineConfig } from 'astro/config';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';
export default defineConfig({
site: 'https://shijian.us',
- output: 'server', // Antiguo modo de renderizado del lado del servidor
+ output: 'static', // Actualizado a modo de exportación estática pura y ultrarrápida
markdown: {
+ remarkPlugins: [remarkMath], // Inyecta el análisis de fórmulas KaTeX
+ rehypePlugins: [rehypeKatex],
shikiConfig: {
themes: {
light: 'github-light',
dark: 'github-dark-dimmed',
},
},
},
});2. Demostración de Plegado Automático para Código Largo (Code Collapse)
Cuando el número de líneas de código es excesivo, el tema activará automáticamente una superposición semitransparente y un botón de cápsula “Expandir código” cuando la altura exceda los 380px:
{
"name": "shijianus-blog",
"version": "2.0.0",
"description": "基于 Astro 6 与安知鱼设计美学的高性能极客独立博客",
"author": "shijianus",
"license": "MIT",
"scripts": {
"dev": "astro dev --host 0.0.0.0",
"build": "BLOG_BUILD_TARGET=static PUBLIC_STATIC_EXPORT=1 astro build",
"preview": "astro preview",
"clean": "node scripts/clean.mjs"
},
"dependencies": {
"@astrojs/mdx": "^5.0.3",
"@astrojs/node": "^10.0.6",
"@astrojs/react": "^5.0.2",
"@tailwindcss/postcss": "^4.2.4",
"@tailwindcss/vite": "^4.2.2",
"astro": "^6.1.3",
"clsx": "^2.1.1",
"katex": "^0.16.11",
"lucide-react": "^0.460.0",
"mermaid": "^11.4.1",
"react": "^19.2.4",
"react-dom": "^19.2.4",
"rehype-katex": "^7.0.1",
"remark-gfm": "^4.0.1",
"remark-math": "^6.0.0",
"tailwind-merge": "^3.5.0",
"tailwindcss": "^4.2.2"
},
"devDependencies": {
"playwright": "^1.62.1",
"wrangler": "^4.85.0"
}
}Cet exemple est dédié à la validation et au test des fonctionnalités d’amélioration des blocs de code dans le corps des articles de blog.
Le thème injecte dans tous les blocs de code : une barre de contrôle de type feux de circulation macOS, des badges de langage, la comparaison Diff des lignes ajoutées/supprimées, la copie en un clic et le pliage automatique des blocs de code longs.
1. Blocs de code Diff avec comparaison des lignes ajoutées/supprimées (Diff Highlighting)
Affiche les lignes ajoutées et supprimées lors des mises à jour de version et des modifications de configuration dans les blocs de code :
import { defineConfig } from 'astro/config';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';
export default defineConfig({
site: 'https://shijian.us',
- output: 'server', // 旧的服务端渲染模式
+ output: 'static', // 升级为极速纯静态导出模式
markdown: {
+ remarkPlugins: [remarkMath], // 注入 KaTeX 公式解析
+ rehypePlugins: [rehypeKatex],
shikiConfig: {
themes: {
light: 'github-light',
dark: 'github-dark-dimmed',
},
},
},
});2. Démonstration du pliage automatique des blocs de code longs (Code Collapse)
Lorsque le nombre de lignes de code est trop élevé, le thème active automatiquement un masque semi-transparent et un bouton « Déplier le code » lorsque la hauteur dépasse 380px :
{
"name": "shijianus-blog",
"version": "2.0.0",
"description": "基于 Astro 6 与安知鱼设计美学的高性能极客独立博客",
"author": "shijianus",
"license": "MIT",
"scripts": {
"dev": "astro dev --host 0.0.0.0",
"build": "BLOG_BUILD_TARGET=static PUBLIC_STATIC_EXPORT=1 astro build",
"preview": "astro preview",
"clean": "node scripts/clean.mjs"
},
"dependencies": {
"@astrojs/mdx": "^5.0.3",
"@astrojs/node": "^10.0.6",
"@astrojs/react": "^5.0.2",
"@tailwindcss/postcss": "^4.2.4",
"@tailwindcss/vite": "^4.2.2",
"astro": "^6.1.3",
"clsx": "^2.1.1",
"katex": "^0.16.11",
"lucide-react": "^0.460.0",
"mermaid": "^11.4.1",
"react": "^19.2.4",
"react-dom": "^19.2.4",
"rehype-katex": "^7.0.1",
"remark-gfm": "^4.0.1",
"remark-math": "^6.0.0",
"tailwind-merge": "^3.5.0",
"tailwindcss": "^4.2.2"
},
"devDependencies": {
"playwright": "^1.62.1",
"wrangler": "^4.85.0"
}
}本篇範例專用於驗證與測試部落格內文中的 程式碼區塊（Code Block Enhancements） 功能。
主題為所有程式碼區塊注入了 macOS 擬物交通燈控制條、語言徽章、增刪行 Diff 對比、一鍵複製 以及 超長程式碼自動限高摺疊。
一、帶增刪行對比的 Diff 程式碼區塊（Diff Highlighting）
在程式碼區塊中展示版本升級與配置變更時的增加行與刪除行：
import { defineConfig } from 'astro/config';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';
export default defineConfig({
site: 'https://shijian.us',
- output: 'server', // 舊的伺服器端渲染模式
+ output: 'static', // 升級為極速純靜態匯出模式
markdown: {
+ remarkPlugins: [remarkMath], // 注入 KaTeX 公式解析
+ rehypePlugins: [rehypeKatex],
shikiConfig: {
themes: {
light: 'github-light',
dark: 'github-dark-dimmed',
},
},
},
});二、超長程式碼自動摺疊演示（Code Collapse）
當程式碼行數過多時，主題會自動在高度超過 380px 時啟用半透明遮罩與「展開程式碼」膠囊按鈕：
{
"name": "shijianus-blog",
"version": "2.0.0",
"description": "基於 Astro 6 與安知魚設計美學的高效能極客獨立部落格",
"author": "shijianus",
"license": "MIT",
"scripts": {
"dev": "astro dev --host 0.0.0.0",
"build": "BLOG_BUILD_TARGET=static PUBLIC_STATIC_EXPORT=1 astro build",
"preview": "astro preview",
"clean": "node scripts/clean.mjs"
},
"dependencies": {
"@astrojs/mdx": "^5.0.3",
"@astrojs/node": "^10.0.6",
"@astrojs/react": "^5.0.2",
"@tailwindcss/postcss": "^4.2.4",
"@tailwindcss/vite": "^4.2.2",
"astro": "^6.1.3",
"clsx": "^2.1.1",
"katex": "^0.16.11",
"lucide-react": "^0.460.0",
"mermaid": "^11.4.1",
"react": "^19.2.4",
"react-dom": "^19.2.4",
"rehype-katex": "^7.0.1",
"remark-gfm": "^4.0.1",
"remark-math": "^6.0.0",
"tailwind-merge": "^3.5.0",
"tailwindcss": "^4.2.2"
},
"devDependencies": {
"playwright": "^1.62.1",
"wrangler": "^4.85.0"
}
}
评论