How to write notes
Posted on 27/11/2020 notes-jekyll.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 sidebardatacamp: 1
if you want to embed a datacamp interactive code question (see below)categories: [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
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
$ sudo apt-get update
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}
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
.
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,
And the result looks like this - notice how we span two colums!
- item 1
- item 2
- item 3
- item 4
- item 5
- item 6
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
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
$x^n + y^n = z^n$
Which will render to $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,
$[A]=\begin{bmatrix}1 & 2 \\\\ 2 & 3.999 \end{bmatrix},$
Labels
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}$.
The above renders to:
$\begin{align}\tag{1}\label{eq1}x^n + y^n = z^n\end{align}$ 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:
which renders into:
Title
Content
Interative coding blocks
You even can embed R/Python code environment inside a post like this.
# 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!")
<-
) to create the variable a
.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:
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:
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
- 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:
registration
: registrationnotes-jekyll
: notes-jekyll
Already-defined tags:
registration
,
jekyll
.
Text
- New badge:
<new />
- Update bagge:
<update />
- Keyboard:
<kbd>Ctrl</kbd>
Ctrl
Figures / Tables / Videos
-
Normal way
![](/link/to/figure/){:.w-500 .no-border}
-
Inline figures
{% include img-inline.html content="/link/to/figure/" %}
-
Youtube video
{% include youtube.html content="wIsK4kQTrIg" size="5" %}
Boxes
Hide/Show
<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>
Notifications
-
Info
<p markdown="1" class="thi-tip"> <i class="material-icons mat-icon">info</i> content </p>
-
Error
<p markdown="1" class="thi-warning"> <i class="material-icons mat-icon">error</i> content </p>
Pull quotes
<p class="post-more-info" markdown="1">
The content of extra info of the post.
</p>
Summarization box
<fieldset class="field-set" markdown="1">
<legend class="leg-title">Title</legend>
Content
</fieldset>
Theorem style
<div class="thi-box" markdown="1">
<div class="box-title" markdown="1">
**Title**
</div>
<div class="box-content" markdown="1">
Content
</div>
</div>
Important boxes
<div class="p-mark" markdown="1">
Content
</div>
Others
Side by side
<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>
Links
See again
<div class="see-again">
<i class="material-icons">settings_backup_restore</i>
<span markdown="1">
Content
</span>
</div>
Read-more link
{% include more.html content="[Welcome to Math2IT](http://math2it.com)." %}
Download
{% include download.html content="[Download text](download link)." %}
Notices
You can create a notice as follows:
<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>
And it looks like this
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>