Thi Notes
AboutNotesBlogTopicsToolsReading
About|Sketches |Cooking |Cafe icon Support Thi
🏀

Demo of all components on this website

Demo of all components on this website

Anh-Thi Dinh
Next.js
Web Dev
SSG
CMS
☝
The content of this post is composed on Notion. Read more: How do I create this site (reasons and tips)?

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.
All text colors: default, gray, brown, orange, yellow, green, blue, purple, pink, red.
All text background: default, gray, brown, orange, yellow, green, blue, purple, pink, red.
Mention URL:
Model Distillation in the API

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
Oct 31, 2025
Integrate github inline
dinhanhthi.com
 of the text.
Mention:
mooc-de/c1-w2 at main · dinhanhthi/mooc-de
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.

Mermaid

Advanced blocks

Columns

Or 3 columns (or 4 if you want),

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.
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,
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 another page

You can use @ to link to other pages too, for example Docker.
In this post
◆Basic blocks○Text○Quote○Toggle (or hide/show)○Callout○Ordered list○Unordered list○To do list○Divider◆Integrations○Github○Bookmark○Images○Video youtube○Equations○Table○Code○Mermaid◆Advanced blocks○Columns○Columns with different sizes○Nested of nested○Heading and its content can be toggled too○Synced blocks○Link to another page
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)
1graph TD
2  Mermaid --> Diagram
graph TD Mermaid --> Diagram
1print(1)
1print(1)
1print(1)
1print(1)
1print(1)
1print(1)
1print(1)