Posted in category others with tags others.

In this post

Fo writing the posts, you have to know about Markdown. It’s very easy to learn, let’s check this.

## Front matter

• math: 1 : only add if you wanna use math equations inside post.
• categories: [cat1, cat2] : add the categories/topics for posts. Refer to the list of categories.
• tags: [tag1, tag2] : add tags for posts. Refer to the list of tags.
• img : thumbnail of the post .
• update: 1 : if you just update the content of the post.
• writing: 1 : if you are writing the post, it’s not finished yet.
• mychoice: 1 : if you make this post as your best choice.
• vn: 1 : if the post is written in vietnamese.
• Icon on each post/page: you have 2 options:
• icon: using Font Awesome, e.g. "fab fa-airbnb". You can use icon-color: #aafdb5 for coloring this icon.
• icon-photo: if you wanna use a photo. This photo must be placed inside /img/header/

The table of contents is only shown if the min-width of the viewport is 1300 px. If you wanna insert the toc in some post, just add following line at the beginning of the post,

{% include toc.html %}


• reading: 1: if you’re reading this book.
• mychoice: 1: if you make this book as your best choice.

## My learning log

- {:.ongoing} Ongoing works! [my progress](/link){:target="_blank".}
- {:.finish} Finished works!
- {:.delay} Comback later!
- {:.fail} Fail!


## Inset figures

• Beginning of each post:
{% assign img-url = '/img/post/ML' %}


and then

![alternative]({{img-url}}/figure.png})

• Normal inserting (without any class):
![Describe](link/to/figures)

• Full 100% width:
{:.img-full-normal}

• Full but overflow outside the margin:
{:.img-full}

• Full but 50% width. We can use 75 for the 75% width.
{:.img-full-50}

• Float to right:
{:.img-right}

• Float to left:
{:.img-left}


## Side by side figure and content

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

</div>


## Insert codes

• If you wanna add tag {% this %}, use alert{{"{% this "}}%}.
• If you like this {{ this }}, use {{"{{ this "}}}}.
• The rule: use {{" before the key-word and end with "}} before the end of key-word.
• An easier way: use {% raw %} and {% endraw %} around the key-word. These two commands are also used for a block of codes,

~~~ {% raw %}{% for %}
// line of codes
{% end for %}{% endraw %} ~~~


Tips: For a beautiful display, put {% raw %} and {% endraw %} exactly like the above code.

## Insert boxes

• Terminal box

{:.terminal}
$sudo apt-get update  • Warning bootstrap : here. • Success box (green): {:.alert.alert-success} Content  • Warning (yellow) {:.alert.alert-warning} Content  • Danger (red) {:.alert.alert-danger} Content  • Quotes I like (hide/show) <div class="tomTat"> <div id="btTomTat" class="collapsed" data-toggle="collapse" href="#ndTomTat"> <span>Highlights I like</span> </div> <div id="ndTomTat" markdown="1" class="collapse multi-collapse ndTomTat"> Contents. </div> </div>  • Definition box  <div class="def-box" markdown="1" id="dn1"> <div class="box-title" markdown="1"> Title </div> <div class="box-content" markdown="1"> Content </div> </div>  • Gray box of code : add class {:.bg-gray} before the code. • Table : If you wanna show the right line of each column, just use the class .bd-right together with class .table. ## Steps <div class="thi-step"> <div class="step"> <div class="step-number"></div> <div class="step-content" markdown="1"> Content of step 1. </div> </div> <div class="step"> <div class="step-number"></div> <div class="step-content" markdown="1"> Content of step 2. </div> </div> </div>  ## Fonts & Texts • Badges <span class="tbadge badge-green">text</span> <span class="tbadge badge-yellow">text</span> <span class="tbadge badge-gray">text</span>  • References at the end of each post” {:.ref} Source of figures used in this post:  • Marked texts: <mark>texts</mark> • Keyboard: <kbd>B</kbd> • More link: {% include more.html content="[text](link)" %}  • Subject: <sbj>Texts</sbj> • Target blank [alt](/link){:target="_blank"}  • For the series of posts {:.series} **For this series** : [part 1](/link), [part 2](/link).  • Text colors: using these classes tgreen, tpink, tyellow. • h2 with smaller font-size (subject): add class .subject before this h2. ## Math expressions • Inline math, use $math-expression$ • Block of math, use $$math block$$ or $$x^n + y^n = z^n$$  • If you wanna insert some special characters, you must put \ before this character, for instance, \\{ 1,2,3 \\} gives$\{ 1,2,3 \}$• If you type inline maths which contain chatacters _, you must add \ before each of them, for example, a\_1 give$a_1$. • Don’t use || for absolute values, let’s use \vert \vert instead. • Don’t use \left\| \right\| for norms, use \Vert \Vert instead. • Don’t use * for star symbols, use \ast instead. • If you wanna type \\, type \\\\ instead. • If you wanna type an inline matrix, e.g.,$[A]=\begin{bmatrix}1 & 2 \\ 2 & 3.999 \end{bmatrix}$, type like below, $[A]=\begin{bmatrix}1 & 2 \\\\ 2 & 3.999 \end{bmatrix}, • In order to use \label{} and \eqref{} like in latex, use \begin{align}\tag{1}\label{eq1} x^n + y^n = z^n \end{align} Call again equation\eqref{eq1}.  • You don’t need an enviroment align or equation to use \label, you can use it with $$ only, for example, $$ x^n + y^n = z^n \tag{1}\label{eq1}$Call again equation$\eqref{eq1}\$.