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)

A paragraph

Nothing inside.

## List

Ordered list,

1. This is an item
2. This is an item
1. This is a nested item.
2. This is a nested item.
3. This is an item
• This is a nested item.
• This is a nested item.
• This is a nested item.
4. 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.
5. 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

1. Item 1
2. Item 2
3. Item 3
4. Item 4
5. Item 5

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,

1. Item

Content

• Item

Content

• Item

2. Item

Inside hide/show box,

Title

Content of the hide/show box.

Content of the warning box.

Box > List > Box
1. Item

Content

2. 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
1. 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.

2. 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$.

3. 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) # tuplex = list(a)
a = (1, 2, 3) # tuplex = list(a)

### Codes side by side

Equal sizes

a = (1, 2, 3) # tuplex = list(a)
<div class="columns-2" markdown="1"><div>

Flexible sizes

a = (1, 2, 3) # tuplex = list(a)
<div class="columns-2" markdown="1"><div>

### Codes with highlights

a = (1, 2, 3) # tuplex = list(a)print(a)print(x)
a = (1, 2, 3) # tuplex = list(a)print(a)print(x)
a = (1, 2, 3) # tuplex = list(a)print(a)print(x)
a = (1, 2, 3) # tuplex = 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 lengthx = list(a)print(a)print(x)
(1, 2, 3)
[1, 2, 3]

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


### Codes with figures

Equal heights,

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

Center align,

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

Top align,

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

Bottom align,

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

### Codes inside a list

1. The first item

# Codes1+1
# Codes

Other contents.

# Other codes
# Code 1
# Code 2
# Code 3
# Code 4
• Sub item 1

# Codes
# Codes
• Sub item 2

# Code 1
# Code 2
# Code 3
# Code 4
2. Another item.

# code

## Hide / Show boxes

Warning box inside

The content

Content of the warning

Other content of the boxes.

Toggle hidden content!

This box uses default title.

Title Name without "" and use markdown

Content

Using liquid tag instead (Title with "")

Note that, above we use '' instead of "" because inside the title, there is another ""!

Using **HTML tags** with ability of being showed by default

Yes! There is a blank line above! And we cannot use markdown inside the title when using HTML tag.

const func = () => {  // content}
But we can with this one!

Content

Boxes inside a list
• Item 1

• Item 2

More detail
// codes
• Sub item.
• Item

### Inside other components

Success:The content with a link inside!

Hide / Show box

Content

Box > List > Box,

1. Item

Title

Content of hsbox.

2. 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

This one has a description.

This is the smallest one!

Col_1Col_2
0A1
1E3
2CNaN
3DNaN
4B2
Col_1Col_2
0A1
1B2
2C-3
3F-4
4ENaN

Col_1Col_2
0A1
1E3
2CNaN
3DNaN
4B2