Markdown

View on GitHub

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.

Select background colour

<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)
`}
/>;

<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.

Select background colour

<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>;

<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 is not needed.

Select background colour

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

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

Component Overrides

The Markdown component uses Text and 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.

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

Select background colour

<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} />
  }}
/>;

<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 component with $color="white", however some component will still need overrides e.g. Text Link would need $appearance='light', see example below.

Select background colour

<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>;

<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>;