Markdown#

The Markdown component renders styled Markdown content within your script’s user interface. It supports different visual themes and syntax highlighter styles for displaying code blocks, making it ideal for rendering documentation, previews, or custom rich-text content.

Import#

1import { Markdown } from 'scripting'

Usage#

1<Markdown content="# Hello\nThis is a **markdown** view." />

Props#

content: string (required)#

The Markdown-formatted text to display. This should follow standard Markdown syntax.

1<Markdown content="## Features\n- Supports **bold**, *italic*, and `code` blocks." />

theme?: 'basic' | 'github' | 'docC'#

Sets the visual theme for the Markdown content. Available options:

• 'basic': A simple, neutral theme.
• 'github': GitHub-style styling (default for code-like docs).
• 'docC': A theme inspired by Apple's DocC documentation style.

1<Markdown content="**Hello**" theme="docC" />

highlighterTheme?: 'midnight' | 'presentation' | 'sundellsColors' | 'sunset' | 'wwdc17' | 'wwdc18'#

Specifies a syntax highlighting theme for code blocks within the Markdown content. If not set, no highlighting theme is applied by default.

Available options:

• 'midnight'
• 'presentation'
• 'sundellsColors'
• 'sunset'
• 'wwdc17'
• 'wwdc18'

1<Markdown
2  content="```js\nconsole.log('Hello')\n```"
3  highlighterTheme="wwdc18"
4/>

useDefaultHighlighterTheme?: boolean#

If set to true, the Markdown view will automatically use the default highlighter theme based on the system’s color scheme (light or dark).

⚠️ This has no effect if highlighterTheme is explicitly set.

1<Markdown
2  content="```swift\nprint(\"Hello\")\n```"
3  useDefaultHighlighterTheme={true}
4/>

scrollable?: boolean#

Default: true

Controls whether the Markdown view is scrollable. Set to false to embed static Markdown content in a fixed area (e.g. inside a scrollable parent container).

1<Markdown content="# Title" scrollable={false} />

Example#

1<Markdown
2  content={`
3# Welcome to Scripting
4
5Here's a quick example:
6
7\`\`\`ts
8const hello = "world"
9console.log(hello)
10\`\`\`
11  `}
12  theme="github"
13  highlighterTheme="sunset"
14/>