For the editor only

Front matter

• math: 1 : only add if you wanna use math equations inside post.
• categories: categories among thought, reading, sketch, tutorial.
• tags: add new tag in _data\tags.yml before using it.
• img: thumbnail of the post .
• bigimg: background photo of the post (showing on shared post on facebook)
• For tutorial posts
  • snippet: 1: use if it post in category tutorial and you wanna pin it on top.
  • Thumbnail for posts in tutorial should be saved in /img/tutorial/
• For reading posts
  • subtitle: author
  • subtitle_link: author’s profile url
  • img: hnmkad.png: book cover (image’s url is img/bookimg/)
  • rating: 3.5: rating of the book, must be a number, not string
• update: 1: if you just update the content of the post. Notice that, the badge “update” is only showed if the updated date is under 7 days.
• notnumbering: 1: if you don’t want to number headings inside the post.
  • In the case you don’t want to number certain of headings, use {:.nocount} before that heading.

Inset figures

• Normal inserting: ![Describe](link/to/figures)
• Full width: {% include img/full.html src="link/to/figures" des="description" %}
• Full but modified: {% include img/full-normal.html src="link/to/figures" des="description" %}
• Full but 50% width: {% include img/full-50.html src="link/to/figures" des="description" %}
• Float to right: {% include img/right.html src="link/to/figures" des="description" %}
• Float to left: {% include img/left.html src="link/to/figures" des="description" %}

Side by side figure and content

• Figure on the left:

  <div class="row align-items-center img-aside">
  <p class="col-md-6" markdown="1">
  ![Description](/link/to/figure)
  </p>
  <p class="col-md-6" markdown="1">
  Contents
  </p>
  </div>
  

• Figure on the right (but above on a smaller view port):

  <div class="row align-items-center img-aside">
  <p class="col-md-6 order-md-2" markdown="1">
  ![Description](/link/to/figure)
  </p>
  <p class="col-md-6 order-md-1" markdown="1">
  Contents.
  </p>
  </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

  <div class="terminal">
  $ sudo apt-get update
  </div>
  

• Warning bootstrap : here.

  • Success box (green):

    <div class="alert alert-success" role="alert" markdown="1">
    Content
    </div>
    

  • Warning (yellow)

    <div class="alert alert-warning" role="alert" markdown="1">
    Content
    </div>
    

  • Danger (red)

    <div class="alert alert-danger" role="alert" markdown="1">
    Content
    </div>
    

  If you wanna insert a block of math inside above boxes, don’t foget to wrap them inside a p tag.

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

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

• Info

  <h4 class="post-more">Information</h4>
  

• Marked texts: <mark>texts</mark>
• Keyboard: <kbd>B</kbd>
• More link:

  {% include more.html content="[text](link)" %}
  

• Subject: <sbj>Texts</sbj>

• Hide/show description for links

  [**Title**](link){:target="_blank"} other texts. [*(my comments)*](#des-1){:data-toggle="collapse" .my-des}
    <des id="des-1" class="collapse multi-collapse">descriptions</des>
  

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