Front Matter

Front matter refers to the section of text at the top of a posts file. For example:

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

The following components are included:

• maths: 1 add this if you want to use mathematical expression in the post.
• toc: 1 if you want to display a table of contents on the left sidebar
• terms: 1 if you want the sidebar to show a list of site terms
• datacamp: 1 if you want to embed a datacamp interactive code question (see below)
• 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

Code

Syntax highlighting

You can insert any block of code you want with a syntax highlight effect like below

Available languages : ruby, python, c, matlab, latex, html, css, javascript.

{% highlight ruby %}

{% endhighlight %}

For example, Python with line numbering,

{% highlight python linenos %}

{% endhighlight %}

or something appears in the command line window like this

by using

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

Keyboard

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

Insert a figure

Standard

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

Inline

{% 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 want to 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 want to then use it

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

Insert toc (Table of Contents)

There are actually two choices for the Table of contents! You can add one manually (as you see to the right, here):

{% include toc.html %}

And you can also see the one generated in the left sidebar via the front end matter:

toc: 1

Make a list into columns

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>

And the result looks like this - notice how we span two colums!

Insert a read-more link

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

Insert steps

If you want something like this:

Do the following:

<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

For inline math, use $math-expression$

Block

For an entire block, you can use $$math block$$ or

~~~ latex
$$
x^n + y^n = z^n
$$
~~~

Special Characters

If you want to insert some special characters, you must put \ before this character, for instance, \\{ 1,2,3 \\} gives $\{ 1m2,3 \}$

Tips

• If you type inline math that contains characters _, 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 want to type \\, type \\\\ instead.

Matrices

If you want to type an inline matrix, e.g., $[A]=\begin{bmatrix}1 & 2 \\ 2 & 3.999 \end{bmatrix}$, type like below,

~~~ latex
$[A]=\begin{bmatrix}1 & 2 \\\\ 2 & 3.999 \end{bmatrix},$
~~~

Labels

In order to use \label{} and \eqref{} like in latex, use

~~~ latex
$$
\begin{align}\tag{1}\label{eq1}
x^n + y^n = z^n
\end{align}
$$

Call again equation $\eqref{eq1}$.
~~~

The above renders to:

$$
\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,

~~~ latex
$$
x^n + y^n = z^n \tag{1}\label{eq1}
$$

Call again equation $\eqref{eq1}$.
~~~

Boxes

Theorem boxes

A theorum box is a nice little callout to highlight some special text. You can create one as follows:

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

which renders into:

Interative coding blocks

You even can embed R/Python code environment inside a post like this.

Notification boxes

A notification box is useful to draw the eyes of the reader to important content. You could create a warning, for example, like this:

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

Rendered it looks like the following:

errorWarning’s content

There is another style for information:

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

which renders to:

infoInfo’s content

Insert Accordian

An accordian menu hides some content, and the user can click to reveal it. It’s best to use an icon on it that suggests that the user should click, like an arrow.

Use these lines of code

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

The above renders into an expandable section:

• expand_more Title

  Content

Insert blockquote

A blockquote is a nice style to show a quote, for example:

The content of extra info of the post.

And you can generate the above as follows:

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

Other normal blockquote like this.

Summary block

A summary block has a title, and then some content, and is another strategy to point out more salient information. If you use these lines of code:

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

You can then generate:

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

Text

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

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

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

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

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

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

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

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

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

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

<fieldset class="field-set" markdown="1">
<legend class="leg-title">TL;DR</legend>
- Show the post in a flexible way.
- Show the figures any place
- Show the maths, the code blocks in a beautiful way.
- and many things else...
</fieldset>

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