Math2IT

### How to use NoteTheme

Posted on 17/08/2018, in NoteTheme.

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

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

$sudo apt-get update by using <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
• 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}

• no-border: remove the border around figure
• w-300: reduce the size of image to maximum 300px (if the screen’s maximum size is 500px, the figure’s size will be 100% the size of the screen). You can change the number 3 in 300 by other numbers 2,4,5,6,7,8,10 or something like w-150.

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

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

{:.nocount}


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}


If you wanna use it,

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


Insert this line

{% include toc.html %}


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

Use the class notdisplay,

{:.notdisplay}


### Make columns for a list

Put the list inside a <div> tag like,

Results,

• item 1
• item 2
• item 3
• item 4
• item 5
• item 6

### Make side-by-side code and result

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.

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

keyboard_arrow_right Welcome to Math2IT.

### Insert steps

If you want something like this,

Content in step 1.

Content in step 2

Use below codes,

<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

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

Use these lines of code

which give

Title

Content

Use these lines of code

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


which give

errorWarning’s content

Use these lines of code

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


which give

infoInfo’s content

### Insert hide/show box

Use these lines of code

<ul class="collapsible" data-collapsible="accordion">
<li>
Title
</div>
<div class="collapsible-body" markdown="1">
Content
</div>
</li>
</ul>


which give

• face Title

Content

### Insert blockquote

The content of extra info of the post.

Other normal blockquote like this.

### Insert resume of the post

Use these lines of code

which give

Title

Content

## 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: notetheme , jekyll , theme , welcome .