This note is used to show the compoents I created to use in this site. It's for me only. I use it as a reference when I wanna create some components for the notes.

👉 Note: For me only (This is another technical note used for this site only).

Inline components

Highlight inline texts.
Keyboards like Ctrl + V or ⌘ + V.
Reference^[ref].
Inline text color.
Some emoji symbols with codes: 👉, 🔅, ❓, ❗, 🇻🇳 (check more here)

Headings

Inside heading

Adjacent headings

Heading H1

Heading H2 (adjacent to H1)

Heading H3 (adjacent to H2)

Heading H4 (adjacent to H3)

Headings next to other components

Heading with other components behind

A paragraph

Another inside heading

Nothing inside.

Blockquotes

This is a blockquote.
Another line?

List

Ordered list,

This is an item
This is an item
1. This is a nested item.
2. This is a nested item.
This is an item
- This is a nested item.
- This is a nested item.
- This is a nested item.
This is an item which has a very long length. I use this to test the wrap of text inside an item of the list.
This is an item

Unordered list,

This is an item
This is an item
This is an item
- This is an item
- This is an item
This is an item
1. This is a nested item.
2. This is a nested item.
This is an item

List inside a box

This is an item
- This is an item
- This is an item
This is an item

This is an item
- This is an item
- This is an item
This is an item

Two columns list

Item 1
Item 2
Item 3
Item 4
Item 5

Alert boxes

Warning: The content with a link inside!

Hide / Show box inside

Content

Success: The content with a link inside!

Hide / Show box

Content

Info: The content with a link inside!

Info: This one uses directly html markups and doesn't have any icon like the others.

Hide / Show box inside

Content

Tip: The content with a link inside!

Danger: The content with a link inside!

Hide / Show box inside

Content

Inside other components

Inside a list,

Item
Content
- Item
  Content
- Item
Item

Inside hide/show box,

Title

Content of the hide/show box.

Content of the warning box.

Box > List > Box

Item
Content
Item

Math

\underbrace{SDR(S,O)}_{\text{Standard Deviation Reduction}}= \underbrace{SD(S)}_{\text{SD before split}}- \underbrace{\sum_j P(O_j | S) \times SD(S,O_j)}_{\text{weighted SD after split}}

Inside a list

Calculate the Standard Deviation ( $SD$ ) of the current node (let's say $S$ , parent node) by using MSE or MAE,
$\begin{aligned}SD(S) &= \frac{1}{n} \sum_{i=1}^{n} (y_i - \bar{y}_i)^2, \\\text{or } SD(S) &= \frac{1}{n}\sum_{i=1}^n \vert y_i - \bar{y}_i \vert,\end{aligned}$
where $y_i\in$ the target values (Hours Played in the above example), $\bar{y}=\frac{\Sigma y}{n}$ is the mean value and $n$ is the number of examples in this node.
Calculate the Standard Deviation Reduction (SDR) after splitting node $S$ on each attribute (for example, consider attribute $O$ ). The attribute w.r.t. the biggest SDR will be chosen!
$\underbrace{SDR(S,O)}_{\text{Standard Deviation Reduction}}= \underbrace{SD(S)}_{\text{SD before split}}- \underbrace{\sum_j P(O_j | S) \times SD(S,O_j)}_{\text{weighted SD after split}}$
where $j \in$ number of different properties in $O$ and $P(O_j)$ is the propability of property $O_j$ in $O$ . Note that, $SD(S,O_j)$ means the SD of node $O_j$ which is also a child of node $S$ .
After splitting, we have new child nodes. Each of them becomes a new parent node in the next step. Go back to step 1

Two columns

# Test
# Test
# Test
# Test
# Test

# Test

# Test

# Test
# Test
# Test
# Test
# Test
# Test

# Test

Title

# Test

# Test

# Test

# Test

# Test

# Test
# Test
# Test
# Test
# Test

# Test

# Test

# Test
# Test
# Test
# Test

# Test

# Test
# Test
# Test
# Test
# Test

# Test

# Test

# Test

# Test

Insert codes

Inline codes without background

Inline codes without background: code, without border code or both code.

Raw codes

We can insert liquid tag here: {% icon "danger" %}.

Normal inserting

a = (1, 2, 3) # tuple
x = list(a)

a = (1, 2, 3) # tuple
x = list(a)

Codes side by side

Equal sizes

a = (1, 2, 3) # tuple
x = list(a)

<div class="columns-2" markdown="1">
<div>

Flexible sizes

a = (1, 2, 3) # tuple
x = list(a)

<div class="columns-2" markdown="1">
<div>

Codes with highlights

a = (1, 2, 3) # tuple
x = list(a)

print(a)
print(x)

a = (1, 2, 3) # tuple
x = list(a)

print(a)
print(x)

a = (1, 2, 3) # tuple
x = list(a)

print(a)
print(x)

a = (1, 2, 3) # tuple
x = list(a)

print(a)
print(x)

Codes with differences

+function myFunction() {
   // …
-  return true;
 }

Codes with results

a = (1, 2, 3) # very long code box will have wider length
x = list(a)

print(a)
print(x)

(1, 2, 3)
[1, 2, 3]

a = (1, 2, 3) # very long code box doesn't have wider length
x = list(a)

print(a)
print(x)

(1, 2, 3)
[1, 2, 3]

Codes with figures

Equal heights,

a = (1, 2, 3) # tuple
x = list(a)
print(a)
print(x)

My home

Center align,

a = (1, 2, 3) # tuple
x = list(a)
print(a)
print(x)

My home

Top align,

a = (1, 2, 3) # tuple
x = list(a)
print(a)
print(x)

My home

Bottom align,

a = (1, 2, 3) # tuple
x = list(a)
print(a)
print(x)

My home

Codes inside a list

The first item

# Codes
1+1

# Codes

Hide / Show boxes

Warning box inside

The content

Content of the warning

Inside other components

Alert box,

Success:The content with a link inside!

Hide / Show box

Content

Box > List > Box,

Item
Title
Content of hsbox.
Item

Inside a list,

We don't have to use directly <div>, we can use :::!
Hide / Show box
Content
1. Item
  Hide / Show box
  Content
2. Item
Item

Insert figures

Insert inline icons

Available icons: , , , , , , .

Check line eleventyConfig.addShortcode("icon" in .eleventy.js for more icon names.

Different sizes

My home

My home
This one has a description.

My home

My home
This is the smallest one!

Tables

Tables side by side

	Col_1	Col_2
0	A	1
1	E	3
2	C	NaN
3	D	NaN
4	B	2

	Col_1	Col_2
0	A	1
1	B	2
2	C	-3
3	F	-4
4	E	NaN

Table and figure

	Col_1	Col_2
0	A	1
1	E	3
2	C	NaN
3	D	NaN
4	B	2

My home