lab components / Text

Markdown

Markdown simplifies text formatting with plain text syntax, promoting efficient writing and consistent content across platforms.

Examples Properties Guidelines

This is a Lab component!

That means it doesn't satisfy our definition of done and may be changed or even deleted. For an exact status, please reach out to the Fancy team through the dev_fancy or ux_fancy channels.

import { Markdown } from "@siteimprove/fancylab";

#Examples

Markdown is a lightweight markup language that simplifies text formatting. It uses plain text syntax, making it easy to write and read. Markdown enhances content creation and ensures consistency across platforms.

Markdown syntax is intuitive, offering a simple way to structure and style your text:

Element	Markdown Syntax	Output Example
Heading 1	`# Heading 1`	Heading 1
Heading 2	`## Heading 2`	Heading 2
Paragraph	Plain text	This is a regular paragraph.
Bold	`bold text`	bold text
Italic	`italic text`	italic text or italic text
Unordered list	`- Item` or `* Item`	Item
Ordered list	`1. Item`	Item
Link	`[Link text](URL)`	Link to Siteimprove
Image	`![Image alt text](folder/filename.png)`
Code	`inline code` or ```language code block with multiple lines ```	`inline code` `code block with multiple lines`
Blockquote	`> quoted text`	Blockquote

#Basic Usage

The markdown string:

This is a markdown string, it contains
- A short list
- with an *emphasized* word
- and a [link](https://www.siteimprove.com)

And the result when rendered via the Markdown component:

This is a markdown string, it contains

A short list
with an emphasized word
and a link

CodeHTML output

const md = `This is a markdown string, it contains
- A short list
- with an *emphasized* word
- and a [link](https://www.siteimprove.com)`;

	return (
		<>
			<p>The markdown string:</p>
			<pre>{md}</pre>
			<p>
				And the result when rendered via the <code>Markdown</code> component:
			</p>
			<Markdown>{md}</Markdown>
		</>
	);

#HTML Escape

Markdown generally handles HTML characters gracefully, but you can explicitly escape HTML tags if needed. Here's an example:

The markdown string:


	> A quote

	a paragraph

	<ul><li>Some HTML</li><li>That makes a list</li></ul>

And the result when rendered via the Markdown (with noEscape) component:

> A quote

a paragraph

<ul><li>Some HTML</li><li>That makes a list</li></ul>

And without noEscape:

> A quote

a paragraph

<ul><li>Some HTML</li><li>That makes a list</li></ul>

CodeHTML output

const md = `
> A quote

a paragraph

<ul><li>Some HTML</li><li>That makes a list</li></ul>
`;

return (
	<>
		<p>The markdown string:</p>
		<pre>{md}</pre>
		<p>
			And the result when rendered via the <code>Markdown</code> (with noEscape) component:
		</p>
		<Markdown noEscape>{md}</Markdown>
		<p>And without noEscape:</p>
		<Markdown>{md}</Markdown>
	</>
);

#Properties

This is a markdown string, it contains

A short list
with an emphasized word
and a link

CodePropsHTML output

Property	Description	Defined	Value
childrenRequired	`string`	YesNo
optionsOptional	`object`	YesNo
classNameOptional	`string`Custom className that's applied to the outermost element (only intended for special cases)	YesNo
noEscapeOptional	`boolean`	YesNo	truefalse
openLinksInNewTabOptional	`boolean`	YesNo	truefalse
data-observe-keyOptional	`string`Unique string, used by external script e.g. for event tracking	YesNo
styleOptional	`object`Style object to apply custom inline styles (only intended for special cases)	YesNo

Empty state with markdown: Provide instructions or context.
Content Authoring: Streamline the writing process.
Documentation: Create clear, easy-to-follow guides.

#Style

Siteimprove Design System: Adhere to Siteimprove's guidelines for color, typography, and spacing. If you are not using a component from Fancy, match the styling of your Markdown to existing components for visual consistency.