Text and Typography
This Jekyll template totally compatible with Markdown syntax. Now, let’s take a look for the text and typography in here.
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
Company | Contact | Country |
---|---|---|
Alfreds Futterkiste | Maria Anders | Germany |
Island Trading | Helen Bennett | UK |
Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
Link
Footnote
Click the hook will locate the footnote1.
Image
Inline code
This is an example of Inline Code
.
Mathematics
The mathematics powered by MathJax:
\[\sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6}\]When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}\]Code Snippet
Common
This is a common code snippet, without syntax highlight and line number.
Specific Languages
Console
$ date
Sun Nov 3 15:11:12 CST 2019
Terminal
$ env |grep SHELL
SHELL=/usr/local/bin/bash
PYENV_SHELL=bash
Ruby
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
if [ $? -ne 0 ]; then
echo "The command was not successful.";
#do the needful / exit
fi;
Liquid
{% if product.title contains 'Pack' %}
This product's title contains the word Pack.
{% endif %}
HTML
<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
<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
-
The footnote source. ↩