menu
Anh-Thi DINH

Shortcuts for editors

Posted on 08/10/2018, in Infomation Technology.

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>

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