206 lines
5.1 KiB
Markdown
206 lines
5.1 KiB
Markdown
---
|
|
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 data-toc-skip>H2</h2>
|
|
|
|
<h3 data-toc-skip>H3</h3>
|
|
|
|
<h4>H4</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
|
|
|
|
<http://127.0.0.1:4000>
|
|
|
|
|
|
## 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:
|
|
|
|
|
|
_Full screen width and center alignment_
|
|
|
|
You can change the size of the picture:
|
|
|
|
{: 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
|
|
|
|
{: 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
|
|
|
|
{: 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
|
|
<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.
|