# React Components/Markdown

## Examples


### Anatomy Tech

```tsx
{
  tags: ['!dev'],
  render: ({}) => <div data-ods="markdown-story">
      <Markdown content={`# Readme
  Wanna know more about **OVHCloud Design System**?

  Check the [Documentation](https://ovh.github.io/design-system/).`} />
    </div>
}
```

### Code Highlighter

```tsx
{
  globals: {
    imports: `import { Code, Markdown } from '@ovhcloud/ods-react';
import lang from '@shikijs/langs/typescript';
import theme from '@shikijs/themes/nord';`
  },
  tags: ['!dev'],
  render: ({}) => <Markdown component={{
    code: ({
      children
    }) => {
      return <Code highlighter={{
        language: lang,
        theme: theme
      }}>
              {children as string}
            </Code>;
    }
  }} content={`# Highlighted Code
  \`\`\`
  // print something in the console
  console.log('Hello World!');
  \`\`\`
  `} />
}
```

### Custom Component

```tsx
{
  globals: {
    imports: `import { Link, Markdown } from '@ovhcloud/ods-react';`
  },
  parameters: {
    docs: {
      source: {
        ...staticSourceRenderConfig()
      }
    }
  },
  tags: ['!dev'],
  render: ({}) => <Markdown component={{
    a: ({
      children,
      href
    }) => <Link href={href} target="_blank">{children}</Link>
  }} content="Here is an example with a [target blank link](https://ovh.github.io/design-system/)" />
}
```

### Default

```tsx
{
  globals: {
    imports: `import { Markdown } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Markdown content={`# Heading 1
  ## Heading 2
  ### Heading 3
  #### Heading 4
  ##### Heading 5
  ###### Heading 6
  > Blockquotes

  \`Inline code\`
  \`\`\`
  // print something in the console
  console.log('Hello World!');
  \`\`\`

  | Column 1 | Column 2 |
  | --- | --- |
  | Value 1 | Value 2 |
  `} />
}
```

### Demo

```tsx
{
  argTypes: orderControls({
    content: {
      table: {
        category: CONTROL_CATEGORY.general
      },
      control: 'text'
    }
  }),
  args: {
    content: 'Markdown **bold** content'
  }
}
```

### Overview

```tsx
{
  tags: ['!dev'],
  parameters: {
    layout: 'centered'
  },
  render: ({}) => {
    const content = `# Readme
Wanna know more about **OVHCloud Design System**?

Check the [Documentation](https://ovh.github.io/design-system/).`;
    return <Tabs defaultValue="preview" style={{
      height: '240px',
      width: '350px'
    }} variant={TABS_VARIANT.switch}>
        <TabList>
          <Tab value="preview">Preview</Tab>
          <Tab value="source">Source</Tab>
        </TabList>

        <TabContent value="preview">
          <Markdown content={content} />
        </TabContent>

        <TabContent value="source">
          <Text preset={TEXT_PRESET.paragraph} style={{
          whiteSpace: 'break-spaces'
        }}>
            {content}
          </Text>
        </TabContent>
      </Tabs>;
  }
}
```

### Theme Generator

```tsx
{
  parameters: {
    layout: 'fullscreen'
  },
  tags: ['!dev'],
  render: ({}) => <Markdown content={`# Heading 1
  ## Heading 2
  ### Heading 3
  #### Heading 4
  ##### Heading 5
  ###### Heading 6
  > Blockquotes

  \`Inline code\`
  \`\`\`
  // print something in the console
  console.log('Hello World!');
  \`\`\`

  | Column 1 | Column 2 |
  | --- | --- |
  | Value 1 | Value 2 |
  `} />
}
```