Cover image for Notion Markdown Playground

Notion Markdown Playground

Cập nhật lúc: 11/16/2024

Click here to test out a Notion Playground testing out Markdown formatting features from bold and italic to images, headers, and embeds

Example
Tutorial
Playground

Table Of Content

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
  • Third item
    • Unordered item
    • Unordered item
    • 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

    app.python
    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)
    python 17 lines
    index.txt
    console.log("You are awsome")
    javascript 1 lines
    app.java
    System.out.println("Hello world")
    java 1 lines

    Images

    banana
    banana
    Baby
    Baby
    Error image

    Notion Features

    Youtube Embed

    Watch video

    Callout

    Callout

    Web Bookmark