Posted in category others with tags others.

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/

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} 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}
    ![Describe](link/to/figures)
    
  • Full but overflow outside the margin:
    {:.img-full}
    ![Describe](link/to/figures)
    
  • Full but 50% width. We can use 75 for the 75% width.
    {:.img-full-50}
    ![Describe](link/to/figures)
    
  • Float to right:
    {:.img-right}
    ![Describe](link/to/figures)
    
  • Float to left:
    {:.img-left}
    ![Describe](link/to/figures)
    

Side by side figure and content

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

![alt](/link)
</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}$.