Below, all markdown elements are present.

This page can be used to preview and customize how markdown is rendered by MarkdownNodeRenderer.

It can also be used as a quick markdown cheat sheet.

See the README for more rendering information.

p: Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ligula ac ligula vulputate luctus sit amet ac ante. Duis iaculis elit vel neque elementum molestie. Praesent eleifend lacinia tellus et bibendum. Vivamus lobortis diam sit amet libero tincidunt, nec consectetur enim tincidunt. Phasellus erat magna, sollicitudin sed eros ut, convallis commodo neque.

p: Paragraph. Morbi mattis sapien nulla. Cras pellentesque neque eu sapien tempor, a porta justo sagittis. Donec libero est, malesuada efficitur erat sit amet, aliquam consectetur nibh. Nulla ultrices convallis viverra. Maecenas consequat sem molestie orci posuere, ac dignissim nisi varius. In tincidunt dui sit amet neque gravida mollis. Maecenas volutpat velit ex, vitae eleifend massa rutrum a. Sed elit nulla, mollis quis dictum ac, faucibus id augue.

p: Paragraph. Morbi mattis sapien nulla. Cras pellentesque neque eu sapien tempor, a porta justo sagittis. Donec libero est, malesuada efficitur erat sit amet, aliquam consectetur nibh. Nulla ultrices convallis viverra. Maecenas consequat sem molestie orci posuere, ac dignissim nisi varius. In tincidunt dui sit amet neque gravida mollis. Maecenas volutpat velit ex, vitae eleifend massa rutrum a. Sed elit nulla, mollis quis dictum ac, faucibus id augue.

blockquote: Blockquote (>). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ligula ac ligula vulputate luctus sit amet ac ante. Duis iaculis elit vel neque elementum molestie. Praesent eleifend lacinia tellus et bibendum. Vivamus lobortis diam sit amet libero tincidunt, nec consectetur enim tincidunt. Phasellus erat magna, sollicitudin sed eros ut, convallis commodo neque.

• li: List Item
• li: List Item
• li: List Item

1. li: List Item
2. li: List Item
3. li: List Item

code: Code
pre: Code

let code = 'JavaScript code';

const longText =
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ligula ac ligula vulputate luctus sit amet ac ante. Duis iaculis elit vel neque elementum molestie. Praesent eleifend lacinia tellus et bibendum. Vivamus lobortis diam sit amet libero tincidunt, nec consectetur enim tincidunt. Phasellus erat magna, sollicitudin sed eros ut, convallis commodo neque. Morbi mattis sapien nulla. Cras pellentesque neque eu sapien tempor, a porta justo sagittis. Donec libero est, malesuada efficitur erat sit amet, aliquam consectetur nibh. Nulla ultrices convallis viverra. Maecenas consequat sem molestie orci posuere, ac dignissim nisi varius. In tincidunt dui sit amet neque gravida mollis. Maecenas volutpat velit ex, vitae eleifend massa rutrum a. Sed elit nulla, mollis quis dictum ac, faucibus id augue.';

const evenLongerText =
  'Fusce dapibus, eros nec dapibus maximus, metus nisl cursus enim, eget malesuada dui ante id libero. Nam porta enim a orci laoreet viverra. Proin quam enim, ullamcorper sed sem eget, volutpat faucibus ipsum. Ut iaculis eget leo et aliquet. Nunc fermentum bibendum dictum. Proin sagittis feugiat neque id volutpat. Nam in ullamcorper dolor, sed iaculis justo. Sed imperdiet erat ut nunc semper, ac maximus sapien varius. In vel pulvinar nisl, non tincidunt diam. Sed mattis ullamcorper enim quis faucibus. Phasellus eu rutrum nulla, eget volutpat nunc. Nam congue vestibulum orci, varius consequat mi facilisis id. Vivamus posuere urna tempus gravida malesuada. Cras non interdum eros. Vestibulum vel tortor velit. Aenean pretium, nulla sit amet congue lacinia, dolor quam porttitor enim, eget placerat magna risus at ex. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed semper tempus massa. Maecenas porta nisl odio, vel dapibus ex ultrices et. Morbi vitae nisl a nulla rutrum euismod. Vestibulum posuere commodo imperdiet.';

inlineCode: Inline Code

let code = 'Inline JavaScript code';

em: Emphasis _ *

strong: Strong __ **

del: Delete/Strikethrough ~~

--- ***

a: Link [text](link)

![alt](link)

This is a paragraph with some Emphasis text. It also contains Strong text, as well as Strikethrough text. Following that, we also have some plain text Inline Code as well as the code let code = 'Inline JavaScript code';, which is highlighted as JavaScript!

Use template tags (see README for list) in your markdown like so:

<template text="{year}"></template>

Result: 2023

You can mix them with markdown, too:

##### <template text="{contentTitle}"></template>

Pretty handy!

For internal navigation, Gatsby includes a built-in link component for creating links between internal pages. This uses a powerful performance feature called preloading to speed up page navigation.

Blazing fast Gatsby Link: <gatsby-link to="/">Home 🔥</gatsby-link>

Blazing fast Gatsby Link: Home 🔥

You can define additional custom components, allowing you to use components right in your markdown.

Custom components are defined in MarkdownRenderer.tsx. The template and gatsby link components above are both custom components.

For example, this custom component is defined as:

'custom-component': (props: any) => (
  <Button {...props} onClick={() => alert('Click!')}>
    {props.children}
  </Button>

Note that all params are passed to the component from markdown as strings.

To use this in markdown:

<custom-component className="shadow">Click Me!</custom-component>

Here is the result:

Click Me!