Moonwalker, tech educator & CTO AstroNot

Oct 29, 2023

Notion Markdown Playground

Example

Tutorial

Playground

Markdown is a lightweight markup language that allows you to easily format text using simple and intuitive syntax. It has become incredibly popular among writers, developers, and content creators due to its simplicity and versatility. It is supported by Notion, and is used by AstroNot to render Notion webpages.

Below is a test for a variety of Notion formatting options:

Markdown Features

Formatting

Markdown provides several ways to format your text. You can make text bold by enclosing it in double asterisks or double underscores. Similarly, you can make text italic by enclosing it in single asterisks or single underscores. For example, **bold** becomes bold and *italic* becomes italic.

Text Examples

Strikethrough: ~~Strikethrough Text~~

Underline: Underlined Text

Bold: Bold

Italic: Italic

Highlighted Text using Backticks

Quote

Mars is there, waiting to be reached. – Buzz Aldrin

Divider

Headers

Markdown allows you to create headers of different levels. You can create a first-level header using a single #, a second-level header using two ##, and so on. Notion supports THREE heading levels. For example:

Level 1 header

Level 2 header

Level 3 header

Lists

Markdown supports both ordered and unordered lists. To create an ordered list, simply prefix each item with a number followed by a period. For unordered lists, use a hyphen or an asterisk. For example:

First item
Second item
1. First subitem
2. Second subitem
3. Third subitem
Third item

Unordered item
Unordered item
- First subitem
- Second subitem
- Third subitem
Unordered item

Highlighted Text

Markdown allows you to highlight text using backticks. This is useful when referring to code or emphasizing specific terms. For example, highlighted text is rendered as highlighted text.

Code Blocks

Markdown provides a way to display code blocks with syntax highlighting. Simply wrap your code within triple backticks followed by the language name.

Single-Line Code Blocks

This is a console.log('single line') code block

Multi-Line Code Blocks

def hyper_random():
    #1. Print a random string of length 10
    rand_string = ''.join(random.choices(string.ascii_uppercase + string.digits, k=10))
    print("Random string: ", rand_string)
    
    #2. Calculate the sum of a list of 5 random integers between 1 and 20
    rand_ints = [random.randint(1, 20) for _ in range(5)]
    print("Random integer list: ", rand_ints)
    print("Sum of random integers: ", sum(rand_ints))

    #3. Create a list of 5 random True/False values
    rand_bools = [bool(random.getrandbits(1)) for _ in range(5)]
    print("Random boolean list: ", rand_bools)
    
    #4. Generate a random hexadecimal color code
    rand_color = '#'+''.join([random.choice('0123456789ABCDEF') for _ in range(6)])
    print("Random color code: ", rand_color)

Images