# Markdown

## Examples


### example

```typescript
import React from 'react';

import Markdown from '@splunk/react-ui/Markdown';

const example = `
# Products overview

- Platform
- Security:
    - Splunk Enterprise Security
    - Splunk Mission Control

 * Observability
    * Splunk Infrastructure Monitoring
    * Splunk IT Service Intelligence

## Keep your digital systems securely up and running
Fend off threat actors. Diminish downtime. Fix issues faster. Do it all with Splunk, the key to enterprise resilience.

1. Prevent major issues
1. Absorb shocks
1. Accelerate transformation

### Sandbox

    function lookAway() {
        head.turn('left');
    }


Link to [Overview](Overview)
`;


function BasicExample() {
    return <Markdown text={example} />;
}

export default BasicExample;
```



### I18n

Combine with gettext interpolation.

```typescript
/* eslint-disable prefer-template */
import React from 'react';

import Markdown from '@splunk/react-ui/Markdown';
import { _ } from '@splunk/ui-utils/i18n';


function I18nExample() {
    const text = _(
        '### UI internationalization\n' +
            'Translate text generated by Python code, JavaScript code, views, menus and Mako templates. Set language/locale ' +
            'specific alternatives for static resources such as images, CSS, other media.\n\n' +
            '[Learn more](https://www.splunk.com/en_us/search.html?q=i18n&size=n_10_n) about Splunk software translation.\n'
    );
    return <Markdown text={text} />;
}

export default I18nExample;
```



### render-props

```typescript
import React from 'react';

import Link from '@splunk/react-ui/Link';
import List from '@splunk/react-ui/List';
import Markdown, { LinkRenderer, ListRenderer } from '@splunk/react-ui/Markdown';

const externalURLs: Array<string> = ['https://www.google.com', 'https://www.splunk.com/'];

const example = `
### Link

Internal Link to [Overview](Overview)

External Link to [Splunk](https://www.splunk.com/)

### List

#### Solution

1. Advanced threat detection
2. Automation and Orchestration
3. Extend visibility from on-premises to the cloud

- Incident management
- Isolate problems in cloud-native environments
- IT modernization
`;


const linkRenderer: LinkRenderer = ({ title, href, children }) => {
    const isExternal = href && externalURLs.indexOf(href) >= 0;

    return (
        <Link title={title} to={href} openInNewContext={isExternal}>
            {children}
        </Link>
    );
};

const listRenderer: ListRenderer = ({ ordered, children }) => {
    return <List ordered={ordered}>{children}</List>;
};

function RendererExample() {
    return <Markdown text={example} linkRenderer={linkRenderer} listRenderer={listRenderer} />;
}

export default RendererExample;
```




## API


### Markdown API

The `Markdown` component renders the given Markdown text as a React component.
The component prefers @splunk/react-ui components over plain HTML components. For example
links are rendered as the `@splunk/react-ui/Link` component instead of plain `<a>` tag.

#### Props

| Name | Type | Required | Default | Description |
|------|------|------|------|------|
| blockquoteRenderer | BlockquoteRenderer | no |  | A custom blockquote renderer. The function is passed an object containing `children`. |
| codeBlockRenderer | CodeBlockRenderer | no |  | A custom code block renderer. The function is passed an object containing `language`, and `children`. It supports the same languages as the `Code` component. |
| codeRenderer | CodeRenderer | no |  | A custom code literal renderer. The function is passed an object containing `children`. |
| elementRef | React.Ref<HTMLElement> | no |  | A React ref which is set to the DOM element when the component mounts and null when it unmounts. |
| headingRenderer | HeadingRenderer \| AnchorHeadingRenderer | no |  | A custom heading renderer. The function is passed an object containing `level` from 1 to 6 and `children`. |
| imageRenderer | ImageRenderer | no |  | A custom image renderer. The function is passed an object containing `src`, `title`, and `alt`. |
| itemRenderer | ItemRenderer | no |  | A custom list item renderer. The function is passed an object containing `children`. |
| linkRenderer | LinkRenderer | no |  | A custom link renderer. This is useful for single-page apps that need to handle links internally. The function is passed an object containing `href`, `title`, and `children`. |
| listRenderer | ListRenderer | no |  | A custom list renderer. The function is passed an object containing `ordered`, `depth`, and `children`. |
| paragraphRenderer | ParagraphRenderer | no |  | A custom paragraph renderer. The function is passed an object containing `children`. |
| text | string | yes |  | The content to be parsed and rendered. |

#### Types

| Name | Type | Description |
|------|------|------|
| AnchorHeadingRenderer | (props: {     children: React.ReactNode[];     level: number; }) => RemarkReturn |  |
| BlockquoteRenderer | (props: { children: React.ReactNode[] }) => RemarkReturn |  |
| CodeBlockRenderer | (props: {     language?: string;     children: React.ReactNode[]; }) => RemarkReturn |  |
| CodeRenderer | (props: { children: React.ReactNode[] }) => RemarkReturn |  |
| HeadingRenderer | (props: { children: React.ReactNode[]; level: number }) => RemarkReturn |  |
| ImageRenderer | (props: { alt?: string; src?: string; title?: string }) => RemarkReturn |  |
| ItemRenderer | (props: { children: React.ReactNode[] }) => RemarkReturn |  |
| LinkRenderer | (props: {     children: React.ReactNode[];     href?: string;     title?: string; }) => RemarkReturn |  |
| ListRenderer | (props: {     children: React.ReactNode[];     depth: number;     ordered: boolean; }) => RemarkReturn |  |
| ParagraphRenderer | (props: { children: React.ReactNode[] }) => RemarkReturn |  |
| RemarkReturn | React.ReactElement<any, any> \| null |  |