This Jekyll template totally compatible with Markdown syntax. Now, let’s take a look for the text and typography in this theme.

Emojis 😁

🚧🚧 For example Work in Progress! 🚧🚧

Comments in MD

The most platform-independent syntax is

1
2
3
4

(empty line)
[//]: # (This may be the most platform independent comment)

<!-- or like this -->

Both conditions are important:

1. Using # (and not <>)
2. With an empty line before the comment. Empty line after the comment has no impact on the result.

\(\LaTeX\)

LaTeX tests inline \(x = 2 * \sqrt(v)\)

Block:

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.

Block Quote

This line to shows the Block Quote.

Tables

Link

http://127.0.0.1:4000

or

http://127.0.0.1:4000

Footnote

Click the hook will locate the footnote¹.

Image

Inline code

This is an example of Inline Code.

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