Shortcuts for editors

Posted on 08/10/2018, in Dev.

This post is only for editors, please read other posts.

Front Matter

There are some already-defined components on NoteTheme that you could use (If you don’t want to use something, remember to REMOVE it)

  • maths: 1 add this if you wanna use mathematical expression in the post.
  • toc: 1 if you wanna display table of contents on the left sidebar
  • comment: 1 if you wanna use disqus comment system for this post
  • datacamp: 1 if you wanna use datacamp light
  • categories: [notetheme,jekyll] add category you want
  • tags: [notetheme,jekyll,code] add tag you want
  • date: 2018-08-21 if you update the post, write the updated date
  • snippet: 1 if you want to pin this post to the Snippets section.
  • bigimg: background photo of the post (showing on shared post on facebook)


  • New badge: <new />
  • Update bagge: <update />
  • Keyboard: <kbd>Ctrl</kbd>


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

Figures / Tables / Videos

  • Normal way

    ![](/link/to/figure/){:.w-500 .no-border}
  • Inline figures

    {% include img-inline.html content="/link/to/figure/" %}
  • Youtube video

    {% include youtube.html content="wIsK4kQTrIg" size="5" %}



<ul class="collapsible" data-collapsible="accordion">
<div class="collapsible-header" markdown="1"><i class="material-icons">face</i>
<div class="collapsible-body" markdown="1">


  • Info

    <p markdown="1" class="thi-tip">
    <i class="material-icons mat-icon">info</i>
  • Error

    <p markdown="1" class="thi-warning">
    <i class="material-icons mat-icon">error</i>

Pull quotes

<p class="post-more-info" markdown="1">
The content of extra info of the post.

Summarization box

<fieldset class="field-set" markdown="1">
<legend class="leg-title">Title</legend>

Theorem style

<div class="thi-box" markdown="1">
<div class="box-title" markdown="1">
<div class="box-content" markdown="1">

Important boxes

<div class="p-mark" markdown="1">


Add toc

{% include toc.html %}

Columns for lists

<div class="thi-columns" markdown="1">
- item 1
- item 2
- item 3
- item 4
- item 5
- item 6

Side by side

<div class="row d-flex" markdown="1">
<div class="col s12 l6" markdown="1">
This is the code
<div class="col s12 l6" markdown="1">
This is the result

See again

<div class="see-again">
<i class="material-icons">settings_backup_restore</i>
<span markdown="1">

Read-more link

{% include more.html content="[Welcome to Math2IT](" %}


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


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

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