Import the tutorial.

2025-12-18 05:41:31 +00:00 · 2019-09-30 20:38:58 +08:00
parent b845c829f6
commit daaad546bb
4 changed files with 388 additions and 0 deletions
--- a/_posts/2019-08-08-text-and-typography.md
+++ b/_posts/2019-08-08-text-and-typography.md
@@ -0,0 +1,157 @@
+---
+title: "Text and Typography"
+date: 2019-08-08 11:33:00 +0800
+categories: [Blogging, Demo]
+tags: [typography]
+---
+
+This Jekyll template totally compatible with Markdown syntax. Now, let's take a look for the text and typography in this theme.
+
+## Titles
+
+***
+# H1
+
+<h2 data-toc-skip>H2</h2>
+
+<h3 data-toc-skip>H3</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
+
+[http://127.0.0.1:4000](http://127.0.0.1:4000)
+
+
+## Footnote
+
+Click the hook will locate the footnote[^footnote].
+
+
+## Image
+
+![Desktop View](/assets/img/sample/mockup.png)
+
+
+## Inline code
+
+This is an example of `Inline Code`.
+
+
+## Code Snippet
+
+### Common
+
+```
+This is a common code snippet, without syntax highlight and line number.
+```
+
+### Specific Languages
+
+#### Console
+
+```console
+$ date
+Sun Nov  3 15:11:12 CST 2019
+```
+
+
+#### Terminal
+
+```terminal
+$ env |grep SHELL
+SHELL=/usr/local/bin/bash
+PYENV_SHELL=bash
+```
+
+#### Ruby
+
+```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
+
+```shell
+if [ $? -ne 0 ]; then
+    echo "The command was not successful.";
+    #do the needful / exit
+fi;
+```
+
+#### Liquid
+
+{% raw %}
+```liquid
+{% if product.title contains 'Pack' %}
+  This product's title contains the word Pack.
+{% endif %}
+```
+{% endraw %}
+
+#### HTML
+
+```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**
+
+```html
+<div class="panel-group">
+  <div class="panel panel-default">
+    <div class="panel-heading" id="{{ category_name }}">
+      <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
+
+[^footnote]: The footnote source.