README Display Examples

Display README files with markdown rendering and syntax highlighting.

Type Interface

import type { BaseChartProps } from '../../types';

export interface ReadmeProps extends BaseChartProps {
  content?: string;
  url?: string;
  file?: string;

  // Rendering options
  theme?: 'light' | 'dark' | 'auto';
  syntaxHighlight?: boolean;

  // Display options
  showTOC?: boolean;
  maxWidth?: number;

  // Callbacks
  onLoad?: (content: string) => void;
  onError?: (error: Error) => void;
}

Light Theme

import { README } from '@vuer-ai/vuer-viz';

const sampleREADME = `# Sample Project

A demonstration of README rendering capabilities.

## Features

- Markdown rendering
- Syntax highlighting
- Code blocks
- Lists and formatting

## Installation

\`\`\`bash
npm install @vuer-ai/vuer-viz
\`\`\`

## Usage

Here's a simple example:

\`\`\`typescript
import { LineChart } from '@vuer-ai/vuer-viz';

const data = [
  { label: 'Series 1', data: [...] }
];
\`\`\`

## API

Use the \`README\` component to display documentation:

- \`content\`: Direct markdown content
- \`url\`: Fetch from URL
- \`file\`: Load from file path
- \`theme\`: light, dark, or auto
- \`syntaxHighlight\`: Enable code highlighting

## Contributing

Pull requests are welcome!
`;

export default function LightREADMEExample() {
  return (
    <README
      content={sampleREADME}
      theme="light"
      syntaxHighlight={true}
      width={650}
      height={440}
    />
  );
}

Dark Theme

import { README } from '@vuer-ai/vuer-viz';

const sampleREADME = `# Sample Project

A demonstration of README rendering capabilities.

## Features

- Markdown rendering
- Syntax highlighting
- Code blocks
- Lists and formatting

## Installation

\`\`\`bash
npm install @vuer-ai/vuer-viz
\`\`\`

## Usage

Here's a simple example:

\`\`\`typescript
import { LineChart } from '@vuer-ai/vuer-viz';

const data = [
  { label: 'Series 1', data: [...] }
];
\`\`\`

## API

Use the \`README\` component to display documentation:

- \`content\`: Direct markdown content
- \`url\`: Fetch from URL
- \`file\`: Load from file path
- \`theme\`: light, dark, or auto
- \`syntaxHighlight\`: Enable code highlighting

## Contributing

Pull requests are welcome!
`;

export default function DarkREADMEExample() {
  return (
    <README
      content={sampleREADME}
      theme="dark"
      syntaxHighlight={true}
      width={650}
      height={440}
    />
  );
}

Features

Markdown rendering (headers, lists, code blocks)
Inline code formatting
Code block syntax highlighting
Light and dark themes
Load from content, URL, or file
Optional table of contents
Configurable max width
Loading and error states

← Back to all charts