Markdown

A React component that renders markdown content with consistent, theme-aware styling. Uses react-markdown under the hood.

Installation

npm install @xsolla/xui-markdown
# or
yarn add @xsolla/xui-markdown

Demo

Basic Markdown

import * as React from 'react';
import { Markdown } from '@xsolla/xui-markdown';

export default function BasicMarkdown() {
  const content = `
# Hello World

This is a paragraph with **bold** and *italic* text.

- Item one
- Item two
- Item three
  `;

  return <Markdown>{content}</Markdown>;
}

Headings and Paragraphs

import * as React from 'react';
import { Markdown } from '@xsolla/xui-markdown';

export default function HeadingsDemo() {
  const content = `
# Heading 1
## Heading 2
### Heading 3
#### Heading 4

This is a regular paragraph with some text content.

Another paragraph following the first one.
  `;

  return <Markdown>{content}</Markdown>;
}

Code Blocks

import * as React from 'react';
import { Markdown } from '@xsolla/xui-markdown';

export default function CodeDemo() {
  const content = `
Inline code: \`const x = 1;\`

Code block:
\`\`\`javascript
function greet(name) {
  return \`Hello, \${name}!\`;
}
\`\`\`
  `;

  return <Markdown>{content}</Markdown>;
}

Anatomy

import { Markdown } from '@xsolla/xui-markdown';

<Markdown
  className="custom-markdown"  // CSS class
>
  {markdownContent}
</Markdown>

Examples

Rich Content

import * as React from 'react';
import { Markdown } from '@xsolla/xui-markdown';

export default function RichContent() {
  const content = `
# Product Documentation

## Getting Started

Follow these steps to integrate our SDK:

1. Install the package
2. Configure your API keys
3. Initialize the SDK

> **Note:** Make sure to keep your API keys secure and never commit them to version control.

### Code Example

\`\`\`javascript
import { SDK } from '@example/sdk';

const client = new SDK({
  apiKey: process.env.API_KEY,
});

await client.initialize();
\`\`\`

### Links and Images

Visit our [documentation](https://docs.example.com) for more details.

![Example diagram](https://example.com/diagram.png)
  `;

  return <Markdown>{content}</Markdown>;
}

Dynamic Content

import * as React from 'react';
import { Markdown } from '@xsolla/xui-markdown';

export default function DynamicContent() {
  const [content, setContent] = React.useState('# Hello\n\nStart typing...');

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
      <textarea
        value={content}
        onChange={(e) => setContent(e.target.value)}
        style={{ height: 300, fontFamily: 'monospace' }}
      />
      <div style={{ background: '#1a1a1a', padding: 16, borderRadius: 8 }}>
        <Markdown>{content}</Markdown>
      </div>
    </div>
  );
}

Article Display

import * as React from 'react';
import { Markdown } from '@xsolla/xui-markdown';

export default function ArticleDisplay() {
  const article = `
# Understanding Game Monetization

## Introduction

Game monetization is a critical aspect of game development that determines how a game generates revenue.

## Key Strategies

### In-App Purchases

In-app purchases (IAP) allow players to buy virtual goods:

- Cosmetic items
- Power-ups
- Premium currency
- Battle passes

### Subscription Models

Subscription models provide ongoing value:

1. **Monthly subscriptions** - Regular content updates
2. **Season passes** - Time-limited content access
3. **Premium tiers** - Enhanced features

> "The best monetization strategies provide value to players while generating sustainable revenue."

## Conclusion

Choose a monetization strategy that aligns with your game design and player expectations.
  `;

  return (
    <article style={{ maxWidth: 800, margin: '0 auto' }}>
      <Markdown>{article}</Markdown>
    </article>
  );
}

API Reference

Markdown

MarkdownProps:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | children | string | - | Markdown content to render. | | className | string | - | CSS class name for the container. |

Supported Markdown Syntax

| Element | Syntax | | :------ | :----- | | Heading 1 | # Heading | | Heading 2 | ## Heading | | Heading 3 | ### Heading | | Heading 4 | #### Heading | | Bold | **text** | | Italic | *text* | | Link | [text](url) | | Image | ![alt](url) | | Inline code | `code` | | Code block | ```language | | Blockquote | > quote | | Unordered list | - item | | Ordered list | 1. item |

Typography Styles

| Element | Font Size | Line Height | Weight | | :------ | :-------- | :---------- | :----- | | h1 | 40px | 48px | 700 | | h2 | 32px | 38px | 700 | | h3 | 28px | 34px | 700 | | h4 | 24px | 28px | 700 | | p | 16px | 22px | 400 | | li | 16px | 22px | 400 |

Theming

The Markdown component automatically uses theme colors from XUIProvider:

• Text color from content.primary
• Link color from control.link.primary
• Blockquote border from border.brand
• Code background with subtle transparency

Accessibility

• Headings create a proper document outline
• Links are styled with visible focus states
• Images require alt text in markdown syntax
• Code blocks are contained in <pre> elements for proper semantics