@markdown

Add editable Markdown text areas to your components

The @markdown directive creates an editable Markdown text area within your component. Users can write content using Markdown syntax, which is automatically converted to HTML when the page is rendered.

Syntax

@markdown(name: "content", title: "Content")

Or using positional parameters:

@markdown("content", title: "Content")

Parameters

Parameter
Required
Description

name

Yes

A unique identifier for the Markdown area within the component

title

No

The label displayed in the editor interface

default

No

Default Markdown content to display when no content has been entered

Examples

Basic Markdown Area

@markdown(name: "content", title: "Content")

With Default Content

Provide helpful default content that guides users on how to use the Markdown editor:

Article Body

Markdown Features

The Markdown editor supports standard Markdown syntax including:

  • Headings (#, ##, ###, etc.)

  • Emphasis (*italic*, **bold**)

  • Lists (ordered and unordered)

  • Links ([text](url))

  • Images (![alt](src))

  • Code blocks (fenced with triple backticks)

  • Blockquotes (>)

  • Horizontal rules (---)

Editor Integration

Users can access the Markdown editor by right-clicking on the Markdown area in the Elements editor and selecting "Edit Markdown" from the contextual menu. This opens a dedicated Markdown editing interface.

  • @text - For simple plain text editing

  • @richtext - For styled text with Typography support

Last updated

Was this helpful?