menu

How to use NoteTheme

Posted on 17/08/2018, in NoteTheme.

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

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

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,

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

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.

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

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

Use these lines of code

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

which give

Title

Content

Notification boxes

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>
<div class="collapsible-header" markdown="1"><i class="material-icons">face</i>
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.

<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

Use these lines of code

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

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

Already-defined categories:

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

Top