This post is only for editors, please read other posts.

Quick

Next posts (other posts)

{% include more.html content="[Go to this post](/link-to-this-post)." %}

Previous posts

<div class="see-again">
<i class="material-icons">settings_backup_restore</i>
<span markdown="1">
[Go back to Course 8 (week 1 to 3)](/ibm-data-professional-certificate-8).
</span>
</div>

Front Matter

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
• snippet: 1 if you want to pin this post to the Snippets section.
• bigimg: background photo of the post (showing on shared post on facebook)

Texts

• New badge: <new />
• Update bagge: <update />
• Keyboard: <kbd>Ctrl</kbd>
• Font color: using these classes: .tblue, .tgreen, .tred, .torange, .tpink.

Codes

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 %}
  // line of codes
  {% end for %}{% endraw %} ~~~
  

  Tips: For a beautiful display, put {% raw %} and {% endraw %} exactly like the above code.

Figures / Tables / Videos

• Normal way: w-500 (150, 200, 300, 400, 500, 600, 650, 700, 750, 800, 900, 1000)

  ![](/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

Add toc

{% include toc.html %}

Columns for lists

<div class="thi-columns" markdown="1">
- item 1
- item 2
- item 3
- item 4
- item 5
- item 6
</div>

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>

Other way

<div class="columns-2" markdown="1">
Texts

![alt](/link)
</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)." %}

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>