🏀

Demo of notion-x and all components on this website

Anh-Thi Dinh
Next.jsWeb DevSSGCMS
My notion-x is a customiztion of react-notion-x.
☝
The content of this post is composed on Notion.

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
      • Nested unordered list
      • Another.
  1. Item 2.
    1. Level 2.
      1. Level 3.

Unordered list

  • Item 1.
    • Level 2
      • Level 3
  • Item 2.
      1. Nested ordered list
      1. Another.

To do list

Task 1.
Task 2.

Divider

Integrations

Github

dinhanhthi.com
dinhanhthi
Sep 8, 2024
Integrate github inline
dinhanhthi.com
 of the text.
Of you can even emebed a gist,

Bookmark

👉 Check out my list of bookmarks.
Math2IT | Toán học, Giáo dục và Công nghệ
Toán học, Giáo dục và Công nghệ
https://www.math2it.com/

Images

👇 Click the image to see it in a bigger size.
This is a caption of this figure.

Video youtube

Equations

This is inline equation. And below is a block equation.
With numbering,
If you don’t want to see the equation numbering,

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

1graph TD
2  Mermaid --> Diagram
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.

Link to other page

You can use @ to link to other pages too, for example Docker.