Basic Writing and Formatting Syntax

Published Sep 18, 2024
⋅
Updated Nov 15, 2025
⋅
2 minutes read

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

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

# Heading 1
# Heading 2

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

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

You can quote text with a >.

Text that is not a quote

Text that is a quote

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

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)

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

  • George Washington
  • John Adams
  • Thomas Jefferson
- 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
1. James Madison
2. James Monroe
3. John Quincy Adams

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

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>

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

To useEffect or not to useEffect(), that is the question.

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

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.";
}
```‎

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

Placeholder

Avatar

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

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 HeaderSecond Header
Content CellContent Cell
Content CellContent Cell
| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |
    Footnotes
  1. Github, "Basic Writing and Formatting Syntax" Github, 2024. [Accessed: 19-Sep-2024]. ↩

  2. Johannes Gutenberg is credited with inventing the movable-type printing press around 1440 in Mainz, Germany. ↩