Search 
🏀

Demo of notion-x and all components on this website

Nam Hoai Nguyen
Nam Hoai Nguyen
💡
I’ve customized react-notion-x repository for my notes taking.

Basic blocks

Text

All kinds of text styling options are supported. Basic text blocks are akin to HTML <p> tags. Text blocks also support a variety of rich text formatting options.

Quote

This is an example quote.

Toggle (or hide/show)

Callout

🚨
This is a basic callout. It can contain blocks and rich text. 💪

Ordered list

  1. Item 1.
  1. Item 2.

Unordered list

  • Item 1.
  • Item 2.

To do list

Task 1.
Task 2.

Divider


Integrations

Github

namhoainguyen.com
namnh198
Dec 10, 2023
Integrate github inline
namhoainguyen.com
of the text.

Bookmark

Images

This is a caption of this figure.

Video youtube

Equations

This is inline equation. And below is a block equation.

Table

Header 1
Header 2
Column 1
Item
Item
Column 2
Item
Item

Code

This is inline code and below are block code with highlighted. Note that, there is a copy button on the top-right corner of the block of code.
1def sum_and_div(num1, num2):
2  sum_nums = num1 + num2
3  div_nums = num1 / num2
4  return sum_nums, div_nums # multiple returns
5
6sum, div = sum_and_div(18, 9)
7print(sum, div)

Mermaid

graph TD Mermaid --> Diagram

Advanced blocks

Columns

1print(1)
1print(1)
Or 3 columns (or 4 if you want),
1print(1)
1print(1)
1print(1)

Columns with different sizes

This one has a greater length than the other side. This sentence has no meaning; it's just for a temporary test.
1print(1)
This one has a shorter length than the other side. This sentence has no meaning; it's just for a temporary test.

Nested of nested

Side by side code and figure,
1print(1)
This is a caption of this figure.

Heading and its content can be toggled too

Synced blocks

You also use synced block. Note that, the below sentence is a clone of this sentence.
You also use synced block. Note that, the below sentence is a clone of this sentence.
You can use @ to link to other pages too, for example Docker