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 sidebarcomment: 1
if you wanna use disqus comment system for this postdatacamp: 1
if you wanna use datacamp lightcategories: [notetheme,jekyll]
add category you wanttags: [notetheme,jekyll,code]
add tag you wantdate: 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 variablea
. -
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
Insert figure
Insert in a normal way
![](/link/to/figure/){:.w-500 .no-border}
no-border
: remove the border around figurew-300
: reduce the size of image to maximum300px
(if the screen’s maximum size is500px
, the figure’s size will be100%
the size of the screen). You can change the number3
in300
by other numbers2,4,5,6,7,8,10
or something likew-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,
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.
Insert a read-more link
{% include more.html content="[Welcome to Math2IT](http://math2it.com)." %}
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
orequation
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
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.
Other normal blockquote like this.
Insert resume of the post
Use these lines of code
which give
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
- Below the title of each post, you will see “in
", for example, this post **in NoteTheme**. - Open file
_data\categories.yml
and add the new category you wantslug
: the id of this category, it will appear in the url, likehttps://dinhanhthi.github.io/notetheme/categories#notetheme
name
: the name of this catefory, it will appear on the site, likenotetheme
Already-defined tags / categories
Already-defined categories:
notetheme
: NoteThemeit
: Information Technology
Already-defined tags:
notetheme
,
jekyll
,
theme
,
welcome
.