In this tutorial, I suppose that you have already installed notetheme, just follow the ones you need and don’t forget to leave a comment below.

infoI’m not a native English speaker, please ignore my bad expressions.

Front Matter

Begin of each post, you need to be careful to choose the right front matter for that post. What’s front matter? Something like this

---
layout: post
title: How to use NoteTheme?
---

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

Insert codes

Syntax highlighting

{% highlight ruby %}

{% endhighlight %}

{% highlight python linenos %}

{% endhighlight %}

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

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 %}
    // các dòng codes
    {% end for %}{% endraw %} ~~~
  

  Tips: For a beautiful display, put {% raw %} and {% endraw %} exactly like the above code.

Keyboard

You can also insert a keyboard like this Ctrl + B, just use <kbd>Ctrl</kbd>.

Insert DataCamp R/Python code environment

• In sert in Front matter of the post you wanna insert DataCamp Light: datacamp: 1
• Read more about datacamp light

• Example

  # This will get executed each time the exercise gets initialized b = 6 # Create a variable a, equal to 5 # Print out a # Create a variable a, equal to 5 a <- 5 # Print out a print(a) test_object("a") test_function("print") success_msg("Great job!")

  Use the assignment operator (<-) to create the variable a.

• Block of codes

    <div class="mt-2 mb-2" data-datacamp-exercise data-lang="r">
  
        <code data-type="pre-exercise-code">
            # This will get executed each time the exercise gets initialized
            b = 6
        </code>
  
        <code data-type="sample-code">
            # Create a variable a, equal to 5
            # Print out a
        </code>
  
        <code data-type="solution">
            # Create a variable a, equal to 5
            a <- 5
            # Print out a
            print(a)
        </code>
  
        <code data-type="sct">
            test_object("a")
            test_function("print")
            success_msg("Great job!")
        </code>
  
        <div data-type="hint">Use the assignment operator (<code><-</code>) to create the variable <code>a</code>.</div>
  
    </div>
  

• Explanation
  • data-lang="r": language to choose, r or python
  • pre-exercise-code: load before executing.
  • sample-code: These will appear in the text editor (left side)
  • solution: The solution of the exercise
  • sct: Check and give the results, see more for R and python.

Insert figure

Insert in a normal way

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

Insert an inline figure

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

Insert an video from Youtube

Determine the youtube video’s url, like this

https://www.youtube.com/watch?v=wIsK4kQTrIg

Choose wIsK4kQTrIg and put it inside below code

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

In that, 5 represents the percent your youtube container width in comparison with the page’s width, for example, 5 means “50%”. You can choose any integer number between 3 and 10. This size is only available on a wide screen (min width is 993px), when the screen is smaller than 993px, the width becomes automatically 100% of page width.

For writing posts

Remove heading numbering

If you don’t want display number before some heading, just put BEFORE this heading {.nocount}, for example,

{:.nocount}
## Heading without numbering

If you wanna use multiple classes, separate them by space.

Manually assign an id for a heading

Indert {:#your-id} before this heading, for instance,

{:#your-id}
## Heading

If you wanna use it,

[Caption]({{ post.url }}#your-id)

Insert toc (table of contents)

Insert this line

{% include toc.html %}

Insert heading only on toc (not display it on the post)

Use the class notdisplay,

{:.notdisplay}
# Hidden deading

Make columns for a list

Put the list inside a <div> tag like,

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

Results,

Make side-by-side code and result

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

gives

This is the code

This is the result

You can change the value of 5 and 6 by other numbers depending on the ratio between their size (their sum must be equal to 11). Read more on the grid of materialize.

Insert a read-more link

{% include more.html content="[Welcome to Math2IT](http://math2it.com)." %}

Insert steps

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

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

Mathematical 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 $\{ 1m2,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}$.
  

  which gives

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

Boxes

Theorem boxes

<div class="thi-box" markdown="1">
<div class="box-title" markdown="1">
**Title**
</div>
<div class="box-content" markdown="1">
Content
</div>
</div>

Notification boxes

{% include warning.html content="Warning's content" %}

{% include tip.html content="Info's content" %}

Insert hide/show box

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

Insert blockquote

The content of extra info of the post.

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

Other normal blockquote like this.

Insert resume of the post

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

Categories and tags

Use it

On the front matter of each post, use this

categories: [maths, python] 
tags: [algebra, function, theorem]

Create a new category

1. Below the title of each post, you will see “in ", for example, this post **in NoteTheme**.
2. Open file _data\categories.yml and add the new category you want
   • slug: the id of this category, it will appear in the url, like

       https://dinhanhthi.github.io/notetheme/categories#notetheme
     

   • name : the name of this catefory, it will appear on the site, like notetheme

Already-defined tags / categories

Already-defined categories:

Already-defined tags: notetheme , jekyll , theme , welcome .