This Jekyll template totally compatible with Markdown syntax. Now, let’s have a look at the text and typography.

Titles

H1

H2

H3

H4

Paragraph

I wandered lonely as a cloud

That floats on high o’er vales and hills,

When all at once I saw a crowd,

A host, of golden daffodils;

Beside the lake, beneath the trees,

Fluttering and dancing in the breeze.

List

Ordered list

1. first item
2. second item
3. third item

Unordered list

• item 1
  • sub item 1
  • sub item 2
• item 2

Block Quote

This line to shows the Block Quote.

Tables

Link

http://127.0.0.1:4000

Footnote

Click the hook will locate the footnote¹.

Image

Inline code

This is an example of Inline Code.

Mathematics

The mathematics powered by MathJax:

When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are

Code Snippet

Common

1

This is a common code snippet, without syntax highlight and line number.

Specific Languages

Console

1
2

$ date
Sun Nov  3 15:11:12 CST 2019

Terminal

1
2
3

$ env |grep SHELL
SHELL=/usr/local/bin/bash
PYENV_SHELL=bash

Ruby

1
2
3
4

def sum_eq_n?(arr, n)
  return true if arr.empty? && n == 0
  arr.product(arr).reject { |a,b| a == b }.any? { |a,b| a + b == n }
end

Shell

1
2
3
4

if [ $? -ne 0 ]; then
    echo "The command was not successful.";
    #do the needful / exit
fi;

Liquid

1
2
3

{% if product.title contains 'Pack' %}
  This product's title contains the word Pack.
{% endif %}

HTML

1
2
3
4
5
6
7
8
9
10
11
12

<div class="sidenav">
  <a href="#contact">Contact</a>
  <button class="dropdown-btn">Dropdown
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-container">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
  <a href="#contact">Search</a>
</div>

Horizontal Scrolling

1
2
3
4
5
6
7
8
9

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading" id="">
      <i class="far fa-folder"></i>
      <p>This is a very long long long long long long long long long long long long long long long long long long long long long line.</p>
      </a>
    </div>
  </div>
</div>

Reverse Footnote