AIO components

Last modified 17 days ago / Edit on Github

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.

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

Two columns list

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

Alert boxes

The content with a link inside!

Hide / Show box inside

Content

The content with a link inside!

Hide / Show box

Content

This one uses directly html markups.

Hide / Show box inside

Content

The content with a link inside!

Hide / Show box inside

Content

Math

SDR(S,O)Standard Deviation Reduction=SD(S)SD before splitjP(OjS)×SD(S,Oj)weighted SD after split\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 (SDSD) of the current node (let's say SS, parent node) by using MSE or MAE,

    SD(S)=1ni=1n(yiyˉi)2,or SD(S)=1ni=1nyiyˉi,\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 yiy_i\in the target values (Hours Played in the above example), yˉ=Σyn\bar{y}=\frac{\Sigma y}{n} is the mean value and nn is the number of examples in this node.

  2. Calculate the Standard Deviation Reduction (SDR) after splitting node SS on each attribute (for example, consider attribute OO). The attribute w.r.t. the biggest SDR will be chosen!

    SDR(S,O)Standard Deviation Reduction=SD(S)SD before splitjP(OjS)×SD(S,Oj)weighted SD after split\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 jj \in number of different properties in OO and P(Oj)P(O_j) is the propability of property OjO_j in OO. Note that, SD(S,Oj)SD(S,O_j) means the SD of node OjO_j which is also a child of node SS.

  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

Insert codes

Normal insert,

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

  1. The first item

    # Codes
    # 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

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

Insert figures

Different sizes

My home

My home

My home

My home
This one has a description.

My home

My home

My home
This is the smallest one!

Tables

Tables side by side

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

Table and figure

Col_1Col_2
0A1
1E3
2CNaN
3DNaN
4B2

My home