Cuttlefish Docs
  • 简体中文

    • spz-markdown

    AI 摘要

    • 该页面由 cuttlefish 组件文档自动生成，优先用于补齐目录可见性与基础说明。
    • 中文正文待人工润色，当前保留英文原始文档，避免语义丢失。
    • 若原始文档缺失，请先在 cuttlefish 对应组件补充最小文档后再同步。

    原始文档（英文）

    简介

    spz-markdown 组件用于将 Markdown 格式的文本渲染为带样式的 HTML 内容。该组件支持基本的 Markdown 语法，并且与文本组件一样支持初始占位（placeholder）功能。

    用法

    基本用法

    <spz-markdown layout="container">
# 标题

这是一段**粗体**文本和*斜体*文本。

- 列表项 1
- 列表项 2

[链接文本](https://example.com)
</spz-markdown>

    使用 Placeholder

    <spz-markdown layout="container">
# 标题

这是 Markdown 内容。
</spz-markdown>

    placeholder 可以通过在组件内部添加带有 placeholder 属性的子元素来实现：

    <spz-markdown layout="container">
  <div placeholder>
    <p>加载中...</p>
  </div>
# 标题

这是 Markdown 内容。
</spz-markdown>

    支持的 Markdown 语法

    • 标题: # H1, ## H2, ### H3
    • 粗体: **文本** 或 __文本__
    • 斜体: *文本* 或 _文本_
    • 链接: 文本 (URL)
    • 无序列表: - 项目
    • 有序列表: 1. 项目
    • 行内代码: `代码`
    • 代码块: ```代码```
    • 水平线: ---
    • 段落: 空行分隔

    属性

    layout (必需)

    必须设置为 container。

    markdown-ignore (可选)

    可以设置在子元素上，用于标识该子元素不需要进行 markdown 转换。带有此属性的元素将保留原始 HTML 内容，不会被 markdown 解析器处理。

    示例：

    <spz-markdown layout="container">
# 这是标题

这是会被转换的 markdown 内容。

<div markdown-ignore>
  <p>这段内容不会被 markdown 转换</p>
  <strong>HTML 标签会原样保留</strong>
</div>

继续的 markdown 内容。
</spz-markdown>

    样式

    组件会自动应用基本的 Markdown 样式，包括：

    • 标题样式（h1, h2, h3）
    • 段落间距
    • 列表样式
    • 代码块样式
    • 链接样式

    你可以通过 CSS 覆盖这些样式来自定义外观。

    示例

    完整示例

    <spz-markdown layout="container">
# 欢迎使用 spz-markdown

这是一个**功能强大**的 Markdown 渲染组件。

## 特性

- 支持基本 Markdown 语法
- 自动样式渲染
- 支持 placeholder

## 代码示例

这是一个行内代码示例：`const x = 1;`

```javascript
function hello() {
  console.log('Hello, World!');
}

    链接

    访问 SPZ 文档 了解更多信息。