This guide is an abstraction from Github's Formatting Syntax documentation.¹
We are using it to show the various styles that we have available.

Headings

To create a heading, add one to two # symbols before your heading text. The number of # you use will determine the hierarchy level and typeface size of the heading.

# Heading 1
# Heading 2

Styling Text

You can indicate emphasis with bold, italic, strikethrough, subscript, or superscript text in comment fields and .md files.

**Bold**
*Italic*
~~Strikethrough~~
<sub>Subscript</sub>
<sup>Superscript</sup>
<kbd>⌘</kbd><kbd>K</kbd>

Quoting Text

You can quote text with a >.

Text that is not a quote
> Text that is a quote

Links

You can create an inline link by wrapping link text in brackets, and then wrapping the URL in parentheses.

[Link](https://www.youtube.com/watch?v=dQw4w9WgXcQ)

Lists

You can make an unordered list by preceding one or more lines of text with -.

- George Washington
- John Adams
- Thomas Jefferson

To order your list, precede each line with a number.

1. James Madison
2. James Monroe
3. John Quincy Adams

Footnotes

You can add footnotes to your content by using this bracket syntax [^1] and then defining the footnote at the bottom of your content.

The invention of the printing press revolutionized the spread of information in Europe during the 15th century.[^2].
 
[^2]: Johannes Gutenberg is credited with inventing the movable-type printing press around 1440 in Mainz, Germany.

Preview

You can preview your markdown content in real-time by using the preview feature in the editor. We have been using it throughout this guide to show you how your markdown content will look when rendered. It comes with a single prop, codeblock, that you can use to display the code block right below the preview.

  <div className="bg-red-400 w-32 h-16 rounded"/>

<Preview>
  <div className="bg-gray-2 border-gray-4 border w-32 h-16 rounded"/>
</Preview>

Inline Code

Append {:lang}{:js} (e.g. {:js}{:js}) to the end of inline code to highlight it like a regular code block.

This is an array `[1, 2, 3]{:js}` of numbers 1 through 3.

Code Blocks

To format code or text into its own distinct block, use triple backticks.

function feature() {
  return "It works in my environment.";
}

```tsx  
function feature() {
  return "It works in my environment.";
}
```‎

Media

You can embed images, videos, and other media in your markdown content. You can also add captions to your images via the <Image/> component.

_Avatar

<Image src='https://avatar.vercel.sh/sylph' alt='Placeholder' caption='Avatar'/>

Tables

You can create tables by assembling a list of words and dividing them with hyphens - (for the first row), and then separating each column with a pipe |.

| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |