Posted in category others with tags others.

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.
  • custom-css : if some page or post has different css, indicate it here.
  • vn: 1 : if the post is written in vietnamese.

Add table of contents

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 file

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

Inset figures

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

    and then

  • Normal inserting (without any class):
  • Full 100% width:
  • Full but overflow outside the margin:
  • Full but 50% width. We can use 75 for the 75% width.
  • Float to right:
  • Float to left:

Side by side figure and content

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


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

    $ sudo apt-get update
  • Warning bootstrap : here.
    • Success box (green):

    • Warning (yellow)

    • Danger (red)

  • Quotes I like (hide/show)

    <div class="tomTat">
    <div id="btTomTat" class="collapsed" data-toggle="collapse" href="#ndTomTat">
      <span>Highlights I like</span>
    <div id="ndTomTat" markdown="1" class="collapse multi-collapse ndTomTat">
  • Definition box

      <div class="def-box" markdown="1" id="dn1">
      <div class="box-title" markdown="1">
      <div class="box-content" markdown="1">
  • Gray box of code : add class {} before the code.
  • Table : If you wanna show the right line of each column, just use the class .bd-right together with class .table.


<div  class="thi-step">

<div class="step">
<div class="step-number"></div>
<div class="step-content" markdown="1">
Content of step 1.

<div class="step">
<div class="step-number"></div>
<div class="step-content" markdown="1">
Content of step 2.


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”
    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
  • For the series of posts
    **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

    x^n + y^n = z^n
    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}$.