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.


Either use toc: 1 in the frontmatter or add

{% include toc.html %}


Only work on localhost: http://localhost:4000/admin.

Open in HTML - in Colab for Python Notes

  • Jupyter notebooks and their exported html files must be placed in /files/jupyter_notebooks/.
  • The notebook must be named exactly the same as the note’s url. For example, if the note’s url is /data-combining, the notebook’s name should be data-combining.ipynb.
{% include note_html_colab.html %}

This will create automatically 2 button containing the link to open the html file and open the notebook in the

Learning log

{% data_ml %}

{% python %}

{% web %}

{% tech %}

{% workflow %}

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.
  • Table results copied from Jupyter notebooks: paste directly. If you wanna add manually without using jupyter notebook, you have to add class dataframe to that table!
    • If the table is too long, you need to wrap this table by a div with class table-wrapper.
    • If you copy the side by side tables, remember to remove all border="1" in the copied html.

Inset figures / images

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 30 to 100 (steps 5) for the percentages.


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 / zoom images

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

❌ Don’t use // for comment in the script, eliminate them or use /* */ instead!!!

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.

Two equal sized columns,

<div class="d-md-flex" markdown="1">
<div class="flex-even overflow-auto pr-md-1" markdown="1">
Rest parameter (ES6)
// code
<div class="flex-even overflow-auto pl-md-1" markdown="1">
Spread Operator (ES6)
// code

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.
  • If you wanna the output box stick to the code box, use class.

Auto-equal 50% code boxes

<div class="flex-auto-equal-2" markdown="1">



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


  • Must indicate katex: 1 in the front matter.
  • Inline: {% katex %}{% endkatex %}.
  • Display mode: {% katex display %}{% endkatex %}.
    • You have to use \begin{aligned} instead of \begin{align} for aligned equations.
  • Many inline formulas: wrap a paragraph with {% katexmm %}{% endkatexmm %} and then use inside it,
    • $..$ for inline.
    • $$..$$ for display.
    • \$ to escape $ anywhere within the katexmm environment.
    • You don’t have to use \_ for _.
  • Read more about jekyll-katex.