Cuttlefish Docs
  • English

    • spz-markdown

    When to use

    spz-markdown renders Markdown-formatted text as styled HTML. Like the text component, it also supports initial placeholders.

    Supported layout

    • container (required)

    Example

    Basic usage

    <spz-markdown layout="container">
# Heading

This is **bold** text and *italic* text.

- List item 1
- List item 2

[Link text](https://example.com)
</spz-markdown>

    Using a placeholder

    <spz-markdown layout="container">
  <div placeholder>
    <p>Loading...</p>
  </div>
# Heading

This is Markdown content.
</spz-markdown>

    Full example

    <spz-markdown layout="container">
# Welcome to spz-markdown

This is a **powerful** Markdown rendering component.

## Features

- Supports basic Markdown syntax
- Automatic style rendering
- Supports placeholders

## Code example

Here is an inline code example: `const x = 1;`

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

    Visit the SPZ documentation to learn more. 

    
## Supported Markdown syntax

- **Headings**: `# H1`, `## H2`, `### H3`
- **Bold**: `**text**` or `__text__`
- **Italic**: `*text*` or `_text_`
- **Links**: `[text](URL)`
- **Unordered list**: `- item`
- **Ordered list**: `1. item`
- **Inline code**: `` `code` ``
- **Code block**: ` ```code``` `
- **Horizontal rule**: `---`
- **Paragraph**: separated by blank lines

## Attributes

| Attribute | Description | Type | Required |
| --- | --- | --- | --- |
| layout | Must be set to `container` | `string` | Yes |
| markdown-ignore | Can be set on child elements to skip Markdown conversion. Elements with this attribute retain their original HTML content | `boolean` | No |

### markdown-ignore example

```html
<spz-markdown layout="container">
# This is a heading

This content will be converted by Markdown.

<div markdown-ignore>
  <p>This content will not be converted by Markdown</p>
  <strong>HTML tags are preserved as-is</strong>
</div>

More Markdown content continues here.
</spz-markdown>

    Styling

    The component automatically applies basic Markdown styles including:

    • Heading styles (h1, h2, h3)
    • Paragraph spacing
    • List styles
    • Code block styles
    • Link styles

    You can override these styles with CSS to customize the appearance.

    Notes

    • This component does not expose custom actions.
    • This component does not emit custom events.