代码块

显示内联代码和代码块

基础

内联代码

使用内联代码在文本段落中显示代码片段。它非常适合直接在句子中引用HTML元素或CSS属性。

<div> 元素用于定义文档中的一个分区

`<div>` 元素用于定义文档中的一个分区

代码块

使用代码块显示带有语法高亮的多行代码片段。代码块对于清晰地展示Web标准代码示例至关重要。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>W3C标准页面</title>
</head>
<body>
  <h1>欢迎学习W3C标准</h1>
</body>
</html>

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>W3C标准页面</title>
</head>
<body>
  <h1>欢迎学习W3C标准</h1>
</body>
</html>

编写代码块时，可以指定将显示在代码块顶部的文件名。图标将根据扩展名或名称自动显示。文件名有助于用户理解代码在项目中的位置和用途。

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>W3C标准页面</title>
</head>
<body>
  <h1>欢迎学习W3C标准</h1>
</body>
</html>

```html [index.html]
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>W3C标准页面</title>
</head>
<body>
  <h1>欢迎学习W3C标准</h1>
</body>
</html>

某些图标已默认定义，但您可以在 app.config.ts 中通过 ui.prose.codeIcon 键添加更多：

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      codeIcon: {
        html: 'i-lucide-file-code-2'
      }
    }
  }
})

每个代码块都有一个内置的复制按钮，会将代码复制到剪贴板。

您可以在 app.config.ts 中通过 ui.icons.copy 和 ui.icons.copyCheck 键更改图标：

app.config.ts

export default defineAppConfig({
  ui: {
    icons: {
      copy: 'i-lucide-copy',
      copyCheck: 'i-lucide-copy-check'
    }
  }
})

高亮行

要高亮代码行，在要高亮的行号周围添加 {}。行高亮对于将用户的注意力集中在代码示例的重要部分很有用。

styles.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
}

```css [styles.css]{3-6,9}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
}

高级

CodeGroup

使用 code-group 将代码块分组到选项卡中。code-group 非常适合以不同Web技术显示代码示例。

<article class="card">
  <header>
    <h2>文章标题</h2>
    <time datetime="2024-01-15">2024-01-15</time>
  </header>
  <p>文章内容...</p>
</article>

.card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  background: white;
}

const article = {
  title: '文章标题',
  date: '2024-01-15',
  content: '文章内容...'
};

interface Article {
  title: string;
  date: string;
  content: string;
}

const article: Article = {
  title: '文章标题',
  date: '2024-01-15',
  content: '文章内容...'
};

:::code-group

```html [HTML5]
<article class="card">
<header>
  <h2>文章标题</h2>
  <time datetime="2024-01-15">2024-01-15</time>
</header>
<p>文章内容...</p>
</article>

CSS3

.card {
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
padding: 1.5rem;
background: white;
}

ES6+

const article = {
title: '文章标题',
date: '2024-01-15',
content: '文章内容...'
};

TypeScript

interface Article {
title: string;
date: string;
content: string;
}

const article: Article = {
title: '文章标题',
date: '2024-01-15',
content: '文章内容...'
};

像 ProsePre 组件一样，CodeGroup 处理文件名、图标和复制按钮。

CodeTree

使用 code-tree 在文件树视图中显示代码块。code-tree 非常适合展示Web项目的结构和文件关系。

styles/main.css

/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  color: #333;
}

/* 布局样式 */
header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 1rem 2rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

nav a {
  color: white;
  text-decoration: none;
  margin-right: 1.5rem;
  transition: opacity 0.3s ease;
}

nav a:hover {
  opacity: 0.8;
}

main {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
}

article {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

footer {
  text-align: center;
  padding: 2rem;
  background: #f5f5f5;
  margin-top: 3rem;
}

了解有关 code-tree 组件的更多信息。

`CodePreview`

使用 code-preview 显示代码旁边的代码输出。code-preview 非常适合交互式示例和演示代码结果。将要在 default 插槽中预览的代码和在 code 插槽中的实际代码编写。

红色文本使用HTML颜色

<span style="color: #e11d48;">红色文本</span>使用HTML颜色

::code-preview
<span style="color: #e11d48;">红色文本</span>使用HTML颜色

#code
```mdc
<span style="color: #e11d48;">红色文本</span>使用HTML颜色

`CodeCollapse`

使用 code-collapse 处理长代码块以保持页面整洁。code-collapse 允许用户仅在需要时展开代码块，提高可读性。

styles/variables.css

/* CSS自定义属性 (CSS Variables) */
:root {
  /* 颜色系统 */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;
  --color-primary-950: #172554;

  /* 中性色 */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-gray-950: #030712;

  /* 间距系统 */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* 字体大小 */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;

  /* 字体粗细 */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* 边框圆角 */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;

  /* 阴影 */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* 过渡 */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  /* Z-index 层级 */
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
}

/* 响应式断点 */
@media (min-width: 640px) {
  :root {
    --font-size-base: 1rem;
  }
}

@media (min-width: 768px) {
  :root {
    --font-size-base: 1.125rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --font-size-base: 1.25rem;
  }
}

::code-collapse

```css [styles/variables.css]
/* CSS自定义属性 (CSS Variables) */
:root {
/* 颜色系统 */
--color-primary-50: #eff6ff;
--color-primary-100: #dbeafe;
--color-primary-200: #bfdbfe;
--color-primary-300: #93c5fd;
--color-primary-400: #60a5fa;
--color-primary-500: #3b82f6;
--color-primary-600: #2563eb;
--color-primary-700: #1d4ed8;
--color-primary-800: #1e40af;
--color-primary-900: #1e3a8a;
--color-primary-950: #172554;

/* 中性色 */
--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
--color-gray-300: #d1d5db;
--color-gray-400: #9ca3af;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-700: #374151;
--color-gray-800: #1f2937;
--color-gray-900: #111827;
--color-gray-950: #030712;

/* 间距系统 */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;

/* 字体大小 */
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 1.875rem;

/* 字体粗细 */
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;

/* 边框圆角 */
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-2xl: 1rem;
--radius-full: 9999px;

/* 阴影 */
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

/* 过渡 */
--transition-fast: 150ms ease;
--transition-base: 250ms ease;
--transition-slow: 350ms ease;

/* Z-index 层级 */
--z-index-dropdown: 1000;
--z-index-sticky: 1020;
--z-index-fixed: 1030;
--z-index-modal-backdrop: 1040;
--z-index-modal: 1050;
--z-index-popover: 1060;
--z-index-tooltip: 1070;
}

/* 响应式断点 */
@media (min-width: 640px) {
:root {
  --font-size-base: 1rem;
}
}

@media (min-width: 768px) {
:root {
  --font-size-base: 1.125rem;
}
}

@media (min-width: 1024px) {
:root {
  --font-size-base: 1.25rem;
}
}

Markdown 语法

标准 Markdown 中的文本、标题和样式。

内容组件

用于构建富文本文档内容的组件