---
title: "Components — Markdown"
canonical: https://sky-ui.cf.sky.com/components/markdown
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Components — Markdown

```js
import { Markdown } from '@sky-uk/ui-core';
```

---

The `Markdown` component renders markdown into Sky UI components. The component supports standard markdown syntax and HTML elements. For example, you could use `<br/>` for soft line breaks or empty lines.

The spacing around markdown elements components is significant. If you encounter any errors, make sure to verify that your markdown syntax and surrounding whitespace are correctly formatted.

```tsx
<Markdown
  content={`
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5

<br>

#### Long Long Heading <br> over two lines

<br>

- first item
- second item
- second item
- second item

<br>

Emphasis, aka italics, with *asterisks* or _underscores_. Strong emphasis, aka bold, with **asterisks** or __underscores__. Combined emphasis with **asterisks and _underscores_**. By default the component uses [accessible inline links](#). Strikethrough uses two tildes. ~~Scratch this.~~

<br>

[title](http://sky.com)
`}
/>;
```

---

## Props

- `content` – markdown content
- `components` - component overrides for HTML tags

---

## Inline and Block elements

The component renders markdown content inside of `React.Fragment`, so you can wrap it with an inline or block element of your choice, if needed.

As we are providing just a simple string, without new lines or any block elements, the content is not parsed as paragraph and could be wrapped in a Text element to be rendered as a `span` by default.

```tsx
<Text
  data-test-id="section-content"
  aria-label="section-content"
  $fontSize={{ xs: 'body-lg', md: 'display-6' }}
>
  <Markdown content="I'm just a simple string with **bold** and *italic*." />
</Text>;
```

If you add new lines or block elements such as `h2`, the strings with new lines will be parsed as paragraphs (and `h2` in this case), so the wrapper [Text](/components/text/) is not needed.

```tsx
<Markdown content="##I'm a heading\nI'm just a simple string\n\nNow over two lines." />
```

---

## Component Overrides

The `Markdown` component uses [Text](/components/text/) and [Text Link](/components/text-link/) components with default styles. However you can override default components using the `components` prop. E.g. substitute generic unordered list with [Icon List](/components/icon-list).

You would also need to use components override if you need to add `data-test-id` or other custom attributes.

```tsx
<Markdown
  content={`
## Heading

Based on your chosen *Sky Glass package*, you need a **10 Mb/s minimum download speed**. So [click here](http://sky.com) to confirm your selection.

- first item
- second item
- second item
- second item

[title](http://sky.com)
  `}
  components={{
    h2: props => (
      <Text
        aria-label="section-heading"
        data-test-id="section-heading"
        $color="positive"
        $colorGradient="products.broadband"
        $fontSize={{ xs: 'display-4', md: 'display-2' }}
        {...props}
      />
    ),
    p: props => (
      <Text as="p" $fontSize={{ xs: 'body-sm', md: 'body-lg' }} $marginY={3} {...props} />
    ),
    ul: props => <IconList $size="small" $color="grey50" {...props} />,
    li: props => <IconList.Item {...props} />
  }}
/>;
```

---

### On Dark Background

Easiest way of changing content color for dark background would be wrapping it with [Text](/components/text/) component with `$color="white"`, however some component will still need overrides e.g. [Text Link](/components/text-link/) would need `$appearance='light'`, see example below.

```tsx
<Text $color="white">
  <Markdown
    content={`
## Heading

- first item
- second item
- second item
- second item

<br>

Based on your chosen *Sky Glass package*, you need a **10 Mb/s minimum download speed**. So [click here](http://sky.com) to confirm your selection.

<br>

[title](http://sky.com)
`}
    components={{
      a: props => <Link $inline $appearance="light" {...props} />,
      ul: props => <IconList $size="small" $color="white" {...props} />,
      li: props => <IconList.Item {...props} />
    }}
  />
</Text>;
```