--- title: Text and Typography author: Cotes Chung date: 2019-08-08 11:33:00 +0800 categories: [Blogging, Demo] tags: [typography] math: true image: /assets/img/sample/devices-mockup.png --- This article is to show markdown syntax rendering on [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork), you can also use it as an example of writing. Now, let's start looking at 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 | 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 footnote[^footnote]. ## Images By default, the image is centered and the image caption can be displayed at the bottom: ![Desktop View](/assets/img/sample/mockup.png) _Full screen width and center alignment_ You can change the size of the picture: ![Desktop View](/assets/img/sample/mockup.png){: width="400"} _400px image width_ In addition, you can use class `left` or `right` to specify the image position (but in this case, the image caption is prohibited), for example: - To the left ![Desktop View](/assets/img/sample/mockup.png){: width="240" class="left"} "A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space." - To the right ![Desktop View](/assets/img/sample/mockup.png){: width="240" class="right"} "A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space." ## Inline code This is an example of `Inline Code`. ## Mathematics The mathematics powered by [**MathJax**](https://www.mathjax.org/): $$ \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 ```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
Contact Search
``` **Horizontal Scrolling** ```html

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.

``` ## Reverse Footnote [^footnote]: The footnote source.