This post is only for me to write the posts and it will be updated frequently without notice!

Front matter

If you don’t want to use any item below, don’t write it down. math: 0 will be considered similarly to math: 1 and jekyll understand that they are the same unless you don’t write either of them.

  • math: 1 : only add if you wanna use math equations inside post. Jump to this section.
  • categories: [cat1, cat2] : add the categories/topics for posts. Current categories on this site: data science, web development, skills, python, others.
  • custom-css : if some page or post has different css, indicate it here.
  • toc: 1 : if you wanna show the table of contents for this post. Jump to this section.
  • excluded_in_search: 1 : if you think that some post/page containing jekyll expressions that may lead to some errors in the search page. If you add this, this post won’t be included in the search page.
  • emoji : (e.g. ":chicken:") if you wanna display an emoji icon in the header for that page/post. Jump to this section.
  • icon : (e.g. "fas fa-book-reader") if you wanna display an icon for that in the header for that page/post.
  • icon-color : (e.g. #ffeead) if you wanna set a color for that icon.
  • icon-photo: jekyll.png : header photo for your post (if it exists). Photos must be stored in /img/header/.
  • jsxgraph: 1 : if you use JSXGraph in your post. Jump to this section.
  • sitemap: false : If you would like to exclude specific pages/posts from the sitemap.
  • subtitle : Only used for pages.

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

Insert youtube videos

For example, if the video’s URL is, use below codes:

{% include youtube.html content="57oX5RMHHdQ" des="Video's description." %}

Insert tables

  • Using this online tool.
  • Using classes corresponding to tables in Bootstrap.
  • Normal table: .normal-table (gray background for heading)
  • Show the right line of each column, just use the class .bd-right together with class .table.

Inset figures

Beginning of each post:

{% assign img-url = '/img/post/ML' %}

and then


Normal inserting (without any class):


Full width

Full 100% width (.img-full-100 is the same):


Full but overflow outside the margin:


Full but 50% width. We can use 75, 85, 90 for the 75%, 85% and 90% width respectively.


FLoat to left / right

Float to the right:


Float to the left:



  • Check the list of emotional icons here.
  • Using: :chicken: gives :chicken:.

Sometimes, this function makes some unwanted errors on the search page. You can copy and paste directly the emojis from this site.

Side-by-side figure and content / columns

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


Default, two columns will be separated into 50-50. If you wanna other ratios, using below classes along with .columns-2:

  • Ratio 2-1 or 1-2: .size-2-1 or .size-1-2.
  • Ratio 3-2 or 2-3: .size-3-2 or .size-2-3.
  • Ratio 1-1: .size-1-1.

You can also use <div> tag to enclose the section you wanna show in only 1 side. Note that you can also use default classes given in bootstrap such as .pl-md-3 to add a separated space between 2 columns.

Click to enlarge

If you wanna some photos having the function “click to enlarge”, just add class .pop to this photo.

Insert JSXGraph

You need to indicate it in the frontmatter: jsxgraph: 1. Below are an example. There are more other options, check the docs.

<div id="jsx-box" class="jxgbox" style="width:100%; height:250px;"></div>
<script type="text/javascript">
JXG.Options = JXG.merge(JXG.Options, {
        majorHeight: 0,
        insertTicks: false, // show tick label
        ticksDistance : 6, // height of main ticks
      lastArrow: {
          type: 1, // change the type
          highlightSize: 8, // ??
          size: 10 // size of last arrow
      // fontSize: 16, // font-size of texts
      cssdefaultstyle: 'font-family: inherit; font-size: inherit;'
      face: 'x' // style of points
      // visible: true, // didn't work??
      // set in the board's settings
      strokeColor: "pink" // grid's color
var brd1 = JXG.JSXGraph.initBoard('jsx-box', {
  boundingbox: [-8, 5, 8, -4],
  grid: false, // display grid?
  showScreenshot: false, // show screen-shot (right lick to save image)?
  showNavigation: false, // show navigation?
  showCopyright: false // show copyright?
var s = brd1.create('slider',[[1,4],[5,4],[1,10,50]],{name:'            n',snapWidth:1});
var a = brd1.create('slider',[[1,3],[5,3],[-10,-3,0]],{name:' start'});
var b = brd1.create('slider',[[1,2],[5,2],[0,2*Math.PI,10]],{name:' end'});
var f = function(x){ return Math.sin(x); };
var plot = brd1.create('functiongraph',[f,function(){return a.Value();}, function(){return b.Value();}]);

var os = brd1.create('riemannsum',[f,
  function(){ return s.Value();}, function(){ "left";},
  function(){return a.Value();},
  function(){return b.Value();}
    fillOpacity: 0.3,

brd1.create('text',[-6,-3,function(){ return 'Area = '+(JXG.Math.Numerics.riemannsum(f,s.Value(),"left".value,a.Value(),b.Value())).toFixed(4); }]);

which gives

Columns & Check box lists

Example like this site.

<div class="two-columns-list" markdown="1">
- [ ] Not finished task. There must be a space between "[" and "]"
- [x] Finished task.

Insert codes

Liquid code

  • If you wanna add tag {% this %}, use {{"{% 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.

Box of codes

  • Gray: {} before ~~~.
  • Output: {:.output} before ~~~.

Code with line numbers

There must be a language!:

{% highlight ruby linenos %}
// line of codes
{% endhighlight %}

Side-by-side code boxes

Depend on the length of codes, you decides to use .d-md-flex or .d-lg-flex.

If you don’t wanna show the line numbers:

<div class="d-md-flex" markdown="1">
Other code blocks

Result code blocks

If you wanna show the line numbers:

<div class="d-md-flex of-auto" markdown="1">
Block of codes with line numbers

Result code blocks

If you want 2 boxes share equal widths

<div class="d-md-flex" markdown="1">
Block of codes.

Block of codes.


  • Add .overflow-auto before the result block if its length is long.
  • (Show line numbers case) Add of-auto like in above example if the main code block has a long length.
  • (Hide line numbers case) Add .overflow-auto before the main code block if its length is long.
  • If you want 2 boxes share equal widths, replace .flex-fill.d-flex with .flex-even!
  • If two column stick together (with no space between them), you can use .pr-md-1 for the left and .pl-md-1 for the right.

Insert boxes

Box around formulas

<p class="p-mark">

Terminal box

$ sudo apt-get update

Alert boxes by Bootstrap

Checkm all other types of alert boxes here. Below are 3 of them (success–green, warning–yellow, danger–red). You have 3 ways to add an alert box in this site. Note that, you can use interchangeably between warning, success and danger.

If your alert box has only 1 paragraph,


If you wanna add a complicated block inside the box or there are more than 1 paragraph,

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

You can use my self-defined tags (Be careful: if you run your site on Github Pages, it won’t work!)

{% alertbox warning %}
{% endalertbox %} 

Hide / Show boxes

For different boxes, use different box1ct!

<div class="hide-show-box">
<button type="button" markdown="1" class="btn collapsed box-button" data-toggle="collapse" data-target="#box1ct">
Box's title
<div id="box1ct" markdown="1" class="collapse multi-collapse box-content">
Box's content.

If you wanna show the box as default, add class show" to the div#box1ct.

:bulb: Simpler method: you can use below shortcode. Be careful: if you run your site on Github Pages, it won’t work!

{% hsbox **Tựa đề box** | show %}
Box's content.
{% endhsbox %} 
If you don’t wanna show the box as default, remove ` show`!

Definition box

<div class="def-box" markdown="1" id="dn1">
<div class="box-title" markdown="1">
<div class="box-content" markdown="1">

:bulb: Simpler method: you can use below shortcode. Be careful: if you run your site on Github Pages, it won’t work!

{% defbox Title | boxid %}
{% enddefbox %} 

Box’s id boxid is optional and you can use markdown syntax for Title.

A simple white box

Like the error box at the end of this post.

<div class="box-error">


  • Gray box of code : add class {} before the code.


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

which gives,

Content of step 1.

Content of step 2.

:bulb: More convinient way: Using below shortcode! Be careful: if you run your site on Github Pages, it won’t work!

{% stepblock %}

{% eachstep %}
Content of step 1.
{% endeachstep %}

{% eachstep %}
Content of step 2.
{% endeachstep %}

{% endstepblock %} 

Fonts & Texts


  • .font-90: 90%. You can use other numbers like 95, 80, 85.

Superscript references

If you wanna add something like that ([ref] ), you can use

{% ref | custom text %} 

where | custom text is optional, defaut is ref.

Given texts

This post is not complete:

{% notcomplete %}

This post is updated frequently:

{% updfreq %}


<span class="tbadge badge-green">text</span>
<span class="tbadge badge-yellow">text</span>
<span class="tbadge badge-gray">text</span>

:bulb: More convinient way: Using below shortcode! Be careful: if you run your site on Github Pages, it won’t work!

{% badge text | green %}
{% badge text | yellow %}
{% badge text | gray %}

References at the end of each post”

Source of figures used in this post:


  • Marked texts: <mark>texts</mark>
    • If you wanna use markdown synctax inside this mark tag, use <mark markdown="span">texts</mark>.
    • :bulb: Easier way (doesn’t work on Github Pages): {% mark highlighted texts %}.
  • Keyboard: <kbd>B</kbd> or {% kbd B %}
  • Open in Colab: {% colab url %}.
  • HTML file: {% html url %}.
  • 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, tgreen-light, .tpink, .tyellow, .tbrown.
  • 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}$.

Notice an error?

Everything on this site is published on Github. Just summit a suggested change or email me directly (don't forget to include the URL containing the bug), I will fix it.