这个Blog使用的是TeXt模板，模板、Markdown以及Jekyll本身包含很多用法。这篇文章汇总了TeXt Demo Site里面的文章。
TeXt - Additional Styles
Success!
success info warning error
Alert
Success Text.
Info Text.
Warning Text.
Error Text.
Tag
success
info
warning
error
Image
Border |
Shadow |
|---|---|
|
|
Rounded |
Circle |
|---|---|
|
|
Mixture
Border+Rounded |
Circle+Shadow |
|---|---|
|
|
Rounded+Shadow |
Circle+Border+Shadow |
|---|---|
|
|
Extra
| Name | Description |
|---|---|
| Spacing | Doc |
| Grid | Doc |
| Icons | Doc |
| Image | Doc |
| Button | Doc |
| Item | Doc |
| Card | Doc |
| Hero | Doc |
| Swiper | Doc |
TeXt - Extensions
With the help of extensions, you can easily add audios, videos, slides and demos in your posts.
Audio
SoundCloud
Netease Cloud Music (网易云音乐)
Available in Chinese mainland.
Video
YouTube
TED
bilibili (哔哩哔哩)
Slide
SlideShare
Demos
CodePen
TeXt - MathJax
When , there are two solutions to and they are
You need set mathjax: true in the _config.yml or the markdown’s front matter to enable it.
After MathJax enabled, you can set mathjax_autoNumber: true to have equations be numbered automatically, You can use \notag or \nonumber to prevent individual equations from being numbered.
markdown:
When $$a \ne 0$$, there are two solutions to $$ax^2 + bx + c = 0$$ and they are
$$x_1 = {-b + \sqrt{b^2-4ac} \over 2a}$$
$$x_2 = {-b - \sqrt{b^2-4ac} \over 2a} \notag$$
front matter:
---
...
mathjax: true
mathjax_autoNumber: true
---
TeXt - Mermaid
graph TB;
A[Do you have a problem in your life?]
B[Then don't worry]
C[Can you do something about it?]
A--no-->B;
A--yes-->C;
C--no-->B;
C--yes-->B;
You need set mermaid: true in the _config.yml or the markdown’s front matter to enable it.
Generation of diagrams and flowcharts from text in a similar manner as markdown.
Ever wanted to simplify documentation and avoid heavy tools like Visio when explaining your code?
This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript.
Flowchart
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
markdown:
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
Sequence Diagram
sequenceDiagram
participant Alice
participant Bob
Alice->John: Hello John, how are you?
loop Healthcheck
John->John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail...
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!
markdown:
```mermaid
sequenceDiagram
participant Alice
participant Bob
Alice->John: Hello John, how are you?
loop Healthcheck
John->John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail...
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!
```
Gant Diagrams
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
markdown:
```mermaid
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid
``` ---
TeXt - Chart
{
"type": "line",
"data": {
"labels": [
"January",
"February",
"March",
"April",
"May",
"June",
"July"
],
"datasets": [
{
"label": "# of bugs",
"fill": false,
"lineTension": 0.1,
"backgroundColor": "rgba(75,192,192,0.4)",
"borderColor": "rgba(75,192,192,1)",
"borderCapStyle": "butt",
"borderDash": [],
"borderDashOffset": 0,
"borderJoinStyle": "miter",
"pointBorderColor": "rgba(75,192,192,1)",
"pointBackgroundColor": "#fff",
"pointBorderWidth": 1,
"pointHoverRadius": 5,
"pointHoverBackgroundColor": "rgba(75,192,192,1)",
"pointHoverBorderColor": "rgba(220,220,220,1)",
"pointHoverBorderWidth": 2,
"pointRadius": 1,
"pointHitRadius": 10,
"data": [
65,
59,
80,
81,
56,
55,
40
],
"spanGaps": false
}
]
},
"options": {}
}
You need set chart: true in the _config.yml or the markdown’s front matter to enable it.
Line Chart
{
"type": "line",
"data": {
"labels": [
"January",
"February",
"March",
"April",
"May",
"June",
"July"
],
"datasets": [
{
"label": "# of bugs",
"fill": false,
"lineTension": 0.1,
"backgroundColor": "rgba(75,192,192,0.4)",
"borderColor": "rgba(75,192,192,1)",
"borderCapStyle": "butt",
"borderDash": [],
"borderDashOffset": 0,
"borderJoinStyle": "miter",
"pointBorderColor": "rgba(75,192,192,1)",
"pointBackgroundColor": "#fff",
"pointBorderWidth": 1,
"pointHoverRadius": 5,
"pointHoverBackgroundColor": "rgba(75,192,192,1)",
"pointHoverBorderColor": "rgba(220,220,220,1)",
"pointHoverBorderWidth": 2,
"pointRadius": 1,
"pointHitRadius": 10,
"data": [
65,
59,
80,
81,
56,
55,
40
],
"spanGaps": false
}
]
},
"options": {}
}
markdown:
```chart
{
"type": "line",
"data": {
"labels": [
"January",
"February",
"March",
"April",
"May",
"June",
"July"
],
"datasets": [
{
"label": "# of bugs",
"fill": false,
"lineTension": 0.1,
"backgroundColor": "rgba(75,192,192,0.4)",
"borderColor": "rgba(75,192,192,1)",
"borderCapStyle": "butt",
"borderDash": [],
"borderDashOffset": 0,
"borderJoinStyle": "miter",
"pointBorderColor": "rgba(75,192,192,1)",
"pointBackgroundColor": "#fff",
"pointBorderWidth": 1,
"pointHoverRadius": 5,
"pointHoverBackgroundColor": "rgba(75,192,192,1)",
"pointHoverBorderColor": "rgba(220,220,220,1)",
"pointHoverBorderWidth": 2,
"pointRadius": 1,
"pointHitRadius": 10,
"data": [
65,
59,
80,
81,
56,
55,
40
],
"spanGaps": false
}
]
},
"options": {}
}
```
Bar Chart
{
"type": "bar",
"data": {
"labels": [
"Red",
"Blue",
"Yellow",
"Green",
"Purple",
"Orange"
],
"datasets": [
{
"label": "# of Votes",
"data": [
12,
19,
3,
5,
2,
3
],
"backgroundColor": [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)"
],
"borderColor": [
"rgba(255,99,132,1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)"
],
"borderWidth": 1
}
]
},
"options": {}
}
markdown:
```chart
{
"type": "bar",
"data": {
"labels": [
"Red",
"Blue",
"Yellow",
"Green",
"Purple",
"Orange"
],
"datasets": [
{
"label": "# of Votes",
"data": [
12,
19,
3,
5,
2,
3
],
"backgroundColor": [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)"
],
"borderColor": [
"rgba(255,99,132,1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)"
],
"borderWidth": 1
}
]
},
"options": {}
}
```
Radar Chart
{
"type": "radar",
"data": {
"labels": [
"Eating",
"Drinking",
"Sleeping",
"Designing",
"Coding",
"Cycling",
"Running"
],
"datasets": [
{
"label": "My First dataset",
"backgroundColor": "rgba(179,181,198,0.2)",
"borderColor": "rgba(179,181,198,1)",
"pointBackgroundColor": "rgba(179,181,198,1)",
"pointBorderColor": "#fff",
"pointHoverBackgroundColor": "#fff",
"pointHoverBorderColor": "rgba(179,181,198,1)",
"data": [
65,
59,
90,
81,
56,
55,
40
]
},
{
"label": "My Second dataset",
"backgroundColor": "rgba(255,99,132,0.2)",
"borderColor": "rgba(255,99,132,1)",
"pointBackgroundColor": "rgba(255,99,132,1)",
"pointBorderColor": "#fff",
"pointHoverBackgroundColor": "#fff",
"pointHoverBorderColor": "rgba(255,99,132,1)",
"data": [
28,
48,
40,
19,
96,
27,
100
]
}
]
},
"options": {}
}
markdown:
```chart
{
"type": "radar",
"data": {
"labels": [
"Eating",
"Drinking",
"Sleeping",
"Designing",
"Coding",
"Cycling",
"Running"
],
"datasets": [
{
"label": "My First dataset",
"backgroundColor": "rgba(179,181,198,0.2)",
"borderColor": "rgba(179,181,198,1)",
"pointBackgroundColor": "rgba(179,181,198,1)",
"pointBorderColor": "#fff",
"pointHoverBackgroundColor": "#fff",
"pointHoverBorderColor": "rgba(179,181,198,1)",
"data": [
65,
59,
90,
81,
56,
55,
40
]
},
{
"label": "My Second dataset",
"backgroundColor": "rgba(255,99,132,0.2)",
"borderColor": "rgba(255,99,132,1)",
"pointBackgroundColor": "rgba(255,99,132,1)",
"pointBorderColor": "#fff",
"pointHoverBackgroundColor": "#fff",
"pointHoverBorderColor": "rgba(255,99,132,1)",
"data": [
28,
48,
40,
19,
96,
27,
100
]
}
]
},
"options": {}
}
```
Polar Area Chart
{
"type": "polarArea",
"data": {
"datasets": [
{
"data": [
11,
16,
7,
3,
14
],
"backgroundColor": [
"#FF6384",
"#4BC0C0",
"#FFCE56",
"#E7E9ED",
"#36A2EB"
],
"label": "My dataset"
}
],
"labels": [
"Red",
"Green",
"Yellow",
"Grey",
"Blue"
]
},
"options": {}
}
markdown:
```chart
{
"type": "polarArea",
"data": {
"datasets": [
{
"data": [
11,
16,
7,
3,
14
],
"backgroundColor": [
"#FF6384",
"#4BC0C0",
"#FFCE56",
"#E7E9ED",
"#36A2EB"
],
"label": "My dataset"
}
],
"labels": [
"Red",
"Green",
"Yellow",
"Grey",
"Blue"
]
},
"options": {}
}
```
Pie Chart
{
"type": "pie",
"data": {
"labels": [
"Red",
"Blue",
"Yellow"
],
"datasets": [
{
"data": [
300,
50,
100
],
"backgroundColor": [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
"hoverBackgroundColor": [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}
]
},
"options": {}
}
markdown:
```chart
{
"type": "pie",
"data": {
"labels": [
"Red",
"Blue",
"Yellow"
],
"datasets": [
{
"data": [
300,
50,
100
],
"backgroundColor": [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
"hoverBackgroundColor": [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}
]
},
"options": {}
}
```
Doughnut Chart
{
"type": "doughnut",
"data": {
"labels": [
"Red",
"Blue",
"Yellow"
],
"datasets": [
{
"data": [
300,
50,
100
],
"backgroundColor": [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
"hoverBackgroundColor": [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}
]
},
"options": {}
}
markdown:
```chart
{
"type": "doughnut",
"data": {
"labels": [
"Red",
"Blue",
"Yellow"
],
"datasets": [
{
"data": [
300,
50,
100
],
"backgroundColor": [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
"hoverBackgroundColor": [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}
]
},
"options": {}
}
```
Bubble Chart
{
"type": "bubble",
"data": {
"datasets": [
{
"label": "First Dataset",
"data": [
{
"x": 20,
"y": 30,
"r": 15
},
{
"x": 40,
"y": 10,
"r": 10
}
],
"backgroundColor": "#FF6384",
"hoverBackgroundColor": "#FF6384"
}
]
},
"options": {}
}
markdown:
```chart
{
"type": "bubble",
"data": {
"datasets": [
{
"label": "First Dataset",
"data": [
{
"x": 20,
"y": 30,
"r": 15
},
{
"x": 40,
"y": 10,
"r": 10
}
],
"backgroundColor": "#FF6384",
"hoverBackgroundColor": "#FF6384"
}
]
},
"options": {}
}
``` ---
TeXt - Modify Date
Article with modify date.
front matter:
---
...
modify_date: 2017-09-09
---
TeXt - Author
Article with specified author.
Set show_author_profile as true to show author profile.
front matter:
---
...
author: Tian Qi
show_author_profile: true
---
Jekyll - Paragraphs
Electroencephalography (EEG) is an electrophysiological monitoring method to record electrical activity of the brain. It is typically noninvasive, with the electrodes placed along the scalp, although invasive electrodes are sometimes used such as in electrocorticography. EEG measures voltage fluctuations resulting from ionic current within the neurons of the brain. In clinical contexts, EEG refers to the recording of the brain’s spontaneous electrical activity over a period of time, as recorded from multiple electrodes placed on the scalp. Diagnostic applications generally focus either on event-related potentials or on the spectral content of EEG. The former investigates potential fluctuations time locked to an event like stimulus onset or button press. The latter analyses the type of neural oscillations (popularly called “brain waves”) that can be observed in EEG signals in the frequency domain.
EEG is most often used to diagnose epilepsy, which causes abnormalities in EEG readings. It is also used to diagnose sleep disorders, depth of anesthesia, coma, encephalopathies, and brain death. EEG used to be a first-line method of diagnosis for tumors, stroke and other focal brain disorders, but this use has decreased with the advent of high-resolution anatomical imaging techniques such as magnetic resonance imaging (MRI) and computed tomography (CT). Despite limited spatial resolution, EEG continues to be a valuable tool for research and diagnosis. It is one of the few mobile techniques available and offers millisecond-range temporal resolution which is not possible with CT, PET or MRI.
Derivatives of the EEG technique include evoked potentials (EP), which involves averaging the EEG activity time-locked to the presentation of a stimulus of some sort (visual, somatosensory, or auditory). Event-related potentials (ERPs) refer to averaged EEG responses that are time-locked to more complex processing of stimuli; this technique is used in cognitive science, cognitive psychology, and psychophysiological research.
Very Long Word
MethionylglutaminylarginyltyrosylglutamylserylleucylphenylalanylalanylglutaminylleucyllysylglutamylarginyllysylglutamylglycylalanylphenylalanylvalylprolyphenylalanYlvalythreonylleucylglycylaspartylprolylglycylisoleucylglutamylglutaminylsErylleucyllysylisoleucylaspartylthreonylleucylIsoleucylglutamylalanylglycylalanylasparthlalanylleucylglutamylleucylglycylisoleucylprolylphenylalanylseRylaspartylprolylleucylalanylaspartylglycylpRolylthreOnylisoleucylglutaminylasPfraginylalanylthreonylleucylarfinylalanylphenylalanylalanylalanylglycylvalythreonylprolylalanylglutaminylcysteinylphenylalanylglutamylmethionylleucylalanylleuOylisoleucylarginylglutaminyllysyhistidylprolylthreonylisoleucylprolylisoleucylglycylleucylmethionyltyrosylalanylasparaginylleucylvalylphenylalanylasparaginyllysyglycylisoleucylaspartylglutamylphenylalanylthrosylalanylglutaminylcysteinylglutamyllysylvalylglycylvalylaspartylserylvalylleucylvalylalnylaspartylvalylprolylvalylglUtaminylglutamylserylalanylprolylphenylalanylarginylglutaminylalanylalanylleucylarginylhistidylasparaginyvalylalanylprolylisoleucylprolylisoleucylphenylalanylisoleucylphenylalanylisoleucylcysteinylprolylprolylaspartylalanylaspartylaspartylaspartylleucylleucylarginylglutaminylisoleucylalanylseryltyrosylglycylarginylglycyltyrosylthreonyltyrOsylleucylleucylserylarginylalanylglycylvalylthreonylglycylalanylglutamYlasparainylarginylalanylalanylleucylprolylleucylasparaginylhistidylleucylValylalanyllysylleucyllysylglutamyltyrosylasparaginylalanylalanylprolylprolylleucylglutaminylglgycylphenylalanylglycylisoleucylserylalanylprolylaspartylglutaminylvalyllysylalanylalanylisoleucylaspartylalanylglycylalanylalanylglycylalanylisoleucylserylglycylserylalanylisoleucylvalyllysylisoIeucylisoleucylglutamylglutaminylHistidylasparaginyliSoleucylglutamylprolylglutamyllysylmethionylleucylalanylalanylleucyllysylvalylphenylalanylcalylglutaminylprolylmethionlysylalanylalanylthreonylarginylserine
From Wikipedia, the free encyclopedia
Jekyll - Headers
markdown:
# H1. TeXt Heading
## H2. TeXt Heading
### H3. TeXt Heading
#### H4. TeXt Heading
##### H5. TeXt Heading
###### H6. TeXt Heading
markdown:
H1. TeXt Heading
==================
H2. TeXt Heading
------
Jekyll - Emphasis
Should Old Acquaintance be forgot
Should Old Acquaintance be forgot
Should Old Acquaintance be forgot
Should Old Acquaintance be forgot
markdown:
*Should Old Acquaintance be forgot*
_Should Old Acquaintance be forgot_
**Should Old Acquaintance be forgot**
__Should Old Acquaintance be forgot__
This is a text with light and strong emphasis.
This is emphasized as well.
This does _not_ work.
This does __not__ work either.
markdown:
This is a ***text with light and strong emphasis***.
This **is _emphasized_ as well**.
This *does _not_ work*.
This **does __not__ work either**.
Jekyll - Links
markdown:
[TeXt](https://github.com/kitian616/jekyll-TeXt-theme/)
With Title
markdown:
[TeXt](https://github.com/kitian616/jekyll-TeXt-theme/ "TeXt")
Reference Links
TeXt is a super customizable Jekyll theme.
markdown:
[TeXt][TeXt] is a super customizable Jekyll theme.
[TeXt]: https://github.com/kitian616/jekyll-TeXt-theme/ "TeXt"
Link Within A Paragraph
TeXt is a super customizable Jekyll theme for personal site, team site, blog, project, documentation, etc. Similar to iOS 11 style, it has large and prominent titles, round buttons and cards.
markdown:
[TeXt](https://github.com/kitian616/jekyll-TeXt-theme/) is a super customizable Jekyll theme for personal site, team site, blog, project, documentation, etc. Similar to iOS 11 style, it has large and prominent titles, round buttons and cards.
Jekyll - Images
An 
a day, keeps 
away.
markdown:
With ALT
markdown:
With Title
markdown:
Specify Width and Height
markdown:
{:width="128px" height="128px"}
markdown:
{:width="64px" height="64px"}
Jekyll - Code Blocks
Code Spans
Use <html> tags for this.
Here is a literal ` backtick.
And here is `some` text (note the two spaces so that one is left
in the output!).
(() => console.log('hello, world! hello, world! hello, world! hello, world! hello, world! hello, world! hello, world! hello, world!'))();
markdown:
Here is a literal `` ` `` backtick.
And here is `` `some` `` text (note the two spaces so that one is left
in the output!).
Standard Code Blocks
Here comes some code
This text belongs to the same code block.
This one is separate.
markdown:
Here comes some code
This text belongs to the same code block.
^
This one is separate.
(() => console.log('hello, world! hello, world! hello, world! hello, world! hello, world! hello, world! hello, world! hello, world!'))();
markdown:
```
(() => console.log('hello, world! hello, world! hello, world! hello, world! hello, world! hello, world! hello, world! hello, world!'))();
```
(() => console.log('hello, world!'))();
markdown:
```javascript
(() => console.log('hello, world!'))();
```
(() => console.log('hello, world! hello, world! hello, world! hello, world! hello, world! hello, world! hello, world! hello, world!'))();
Highlighting Code Snippets
(() => console.log('hello, world!'))();markdown:
{% highlight javascript %}
(() => console.log('hello, world!'))();
{% endhighlight %}
Line Numbers
1
2
3
4
var hello = 'hello';
var world = 'world';
var space = ' ';
(() => console.log(hello + space + world + space + hello + space + world + space + hello + space + world + space + hello + space + world))();
markdown:
{% highlight javascript linenos %}
var hello = 'hello';
var world = 'world';
var space = ' ';
(() => console.log(hello + space + world + space + hello + space + world + space + hello + space + world + space + hello + space + world))();
{% endhighlight %}
(() => console.log('hello, world! hello, world! hello, world! hello, world! hello, world! hello, world! hello, world! hello, world!'))();(() => console.log('hello, world! hello, world! hello, world! hello, world! hello, world! hello, world! hello, world! hello, world!'))();Fenced Code Blocks
Here comes some code.
markdown:
~~~
Here comes some code.
~~~
~~~~~~~
code with tildes
~~~~~~~~
markdown:
~~~~~~~~~~~~
~~~~~~~
code with tildes
~~~~~~~~
~~~~~~~~~~~~~~~~~~
Language of Code Blocks
def what?
42
end
markdown:
~~~
def what?
42
end
~~~
{: .language-ruby}
def what?
42
end
markdown:
~~~ ruby
def what?
42
end
~~~
Jekyll - Tables
Align
| Default aligned | Left aligned | Center aligned | Right aligned |
|---|---|---|---|
| First body part | Second cell | Third cell | fourth cell |
| Second line | foo | strong | baz |
| Third line | quux | baz | bar |
| Second body | |||
| 2 line | |||
| Footer row |
markdown:
|-----------------+------------+-----------------+----------------|
| Default aligned |Left aligned| Center aligned | Right aligned |
|-----------------|:-----------|:---------------:|---------------:|
| First body part |Second cell | Third cell | fourth cell |
| Second line |foo | **strong** | baz |
| Third line |quux | baz | bar |
|-----------------+------------+-----------------+----------------|
| Second body | | | |
| 2 line | | | |
|=================+============+=================+================|
| Footer row | | | |
|-----------------+------------+-----------------+----------------|
| Default aligned | Left aligned | Center aligned | Right aligned |
|---|---|---|---|
| First body part | Second cell | Third cell | fourth cell |
| Second line | foo | strong | baz |
| Third line | quux | baz | bar |
| Second body | |||
| 2 line | |||
| Footer row |
markdown:
|---
| Default aligned | Left aligned | Center aligned | Right aligned
|-|:-|:-:|-:
| First body part | Second cell | Third cell | fourth cell
| Second line |foo | **strong** | baz
| Third line |quux | baz | bar
|---
| Second body
| 2 line
|===
| Footer row
Table With Images
| Model | iPhone 6S | iPhone 6S Plus | iPhone SE | iPhone 7 | iPhone 7 Plus | iPhone 8 | iPhone 8 Plus | iPhone X |
|---|---|---|---|---|---|---|---|---|
| Picture |  |
 |
 |
 |
 |
 |
 |
 |
| Initial release operating system | iOS 9.0 | iOS 9.0 | iOS 9.3 | iOS 10.0 | iOS 10.0 | iOS 11.0 | iOS 11.0 | iOS 11.0.1 |
| Display | 4.7 in (120 mm), 4.1 in (100 mm) by 2.3 in (58 mm), 16:9 aspect ratio, aluminosilicate glass covered 16,777,216-color (24-bit), IPS LCD screen, 1,334 × 750 px screen resolution at 326 ppi, 1400:1 contrast ratio, 500 cd⁄m² max brightness, LED backlight and fingerprint-resistant oleophobic coating | 5.5 in (140 mm), 4.8 in (120 mm) by 2.7 in (69 mm), 16:9 aspect ratio, aluminosilicate glass covered 16,777,216-color (24-bit), IPS LCD screen, 1,920 × 1,080 px (Full HD) screen resolution at 401 ppi, 1300:1 contrast ratio, 500 cd⁄m² max brightness, LED backlight and fingerprint-resistant oleophobic coating | 4 in (100 mm), 3.5 in (89 mm) by 1.9 in (48 mm), 71:40 (~16:9) aspect ratio, aluminosilicate glass covered 16,777,216-color (24-bit), IPS LCD screen, 1,136 × 640 px (WSVGA) screen resolution at 326 ppi, pixel size 78 µm, 800:1 contrast ratio, 500 cd⁄m² max brightness, LED backlight and fingerprint-resistant oleophobic coating | In addition to 6S: 625 cd⁄m² max brightness | In addition to 6S Plus: 625 cd⁄m² max brightness | In addition to 7: True Tone display | In addition to 7 Plus: True Tone display | 5.8 in (150 mm), 5.31 in (135 mm) by 2.45 in (62 mm), ~19.5:9 aspect ratio, aluminosilicate glass covered 16,777,216-color (24-bit), AMOLED screen, 2,436 × 1,125 px screen resolution at 458 ppi, 1,000,000:1 contrast ratio, 625 cd⁄m² max brightness, fingerprint-resistant oleophobic coating, True Tone display, Dolby Vision and HDR10 support |
From Wikipedia, the free encyclopedia
Table With Long Text
| Language | Demo |
|---|---|
| C | printf(“hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!”); |
| C++ | std::cout«“hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!”«std::endl; |
| Java | System.out.println(“hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!”); |
| JavaScript | console.log(‘hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!’); |
Jekyll - Lists
Unordered list
- Aenean
- vel
- libero
- eget
- ante
markdown:
* Aenean
* vel
* libero
* eget
* ante
Ordered list
- Aenean
- vel
- libero
- eget
- ante
markdown:
1. Aenean
2. vel
3. libero
4. eget
5. ante
Task list
-
a bigger project
- first subtask
- follow up subtask
- final subtask
- a separate task
Jekyll - Blockquotes
“There is nothing either good or bad, but thinking makes it so.”
—Hamlet in Hamlet
markdown:
> “There is nothing either good or bad, but thinking makes it so.”
>
> —Hamlet in *Hamlet*
“From women’s eyes this doctrine I derive:
They sparkle still the right Promethean fire;
They are the books, the arts, the academes,
That show, contain, and nourish all the world.”
—Berowne in Love’s Labor’s Lost
Jekyll - Definition
- kramdown
- A Markdown-superset converter
- Maruku
- Another Markdown-superset converter
markdown:
kramdown
: A Markdown-superset converter
Maruku
: Another Markdown-superset converter
Jekyll - Footnote
Here is a footnote reference,1 and another.2
markdown:
Here is a footnote reference,[^1] and another.[^longnote]
[^1]: Here is the footnote.
[^longnote]: Here’s one with multiple blocks.
Subsequent paragraphs are indented to show that they
belong to the previous footnote.
Jekyll - Horizontal Rules
* * *
***
*****
- - -
---------------------------------------
Unicode characters
‘Test - ~`!@ #$%^ &*() -=_+ []{} |;: ,.<> ?/’’” αβγδ ÁÀÂÄÃĄÆ ®☃︎⌘✉︎ 😂🤣👻👽’
Basic Latin
!”#$%&’()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~
Latin-1 Supplement
¡¢£¤¥¦§¨©ª«¬ ®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿ
Latin Extended-A
ĀāĂ㥹ĆćĈĉĊċČčĎďĐđĒēĔĕĖėĘęĚěĜĝĞğĠġĢģĤĥĦħĨĩĪīĬĭĮįİıIJijĴĵĶķĸĹĺĻļĽľĿŀŁłŃńŅņŇňʼnŊŋŌōŎŏŐőŒœŔŕŖŗŘřŚśŜŝŞşŠšŢţŤťŦŧŨũŪūŬŭŮůŰűŲųŴŵŶŷŸŹźŻżŽžſ
Latin Extended-B
ƀƁƂƃƄƅƆƇƈƉƊƋƌƍƎƏƐƑƒƓƔƕƖƗƘƙƚƛƜƝƞƟƠơƢƣƤƥƦƧƨƩƪƫƬƭƮƯưƱƲƳƴƵƶƷƸƹƺƻƼƽƾƿǀǁǂǃDŽDždžLJLjljNJNjnjǍǎǏǐǑǒǓǔǕǖǗǘǙǚǛǜǝǞǟǠǡǢǣǤǥǦǧǨǩǪǫǬǭǮǯǰDZDzdzǴǵǶǷǸǹǺǻǼǽǾǿȀȁȂȃȄȅȆȇȈȉȊȋȌȍȎȏȐȑȒȓȔȕȖȗȘșȚțȜȝȞȟȠȡȢȣȤȥȦȧȨȩȪȫȬȭȮȯȰȱȲȳȴȵȶȷȸȹȺȻȼȽȾȿɀɁɂɃɄɅɆɇɈɉɊɋɌɍɎɏ
Latin Extended Additional
ḂḃḊḋḞḟṀṁṖṗṠṡṪṫẀẁẂẃẄẅẛỲỳ
Greek and Coptic
ͰͱͲͳʹ͵Ͷͷͺͻͼͽ;Ϳ΄΅Ά·ΈΉΊΌΎΏΐΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩΪΫάέήίΰαβγδεζηθικλμνξοπρςστυφχψωϊϋόύώϏϐϑϒϓϔϕϖϗϘϙϚϛϜϝϞϟϠϡϢϣϤϥϦϧϨϩϪϫϬϭϮϯϰϱϲϳϴϵ϶ϷϸϹϺϻϼϽϾϿ
Greek Extended
ἀἁἂἃἄἅἆἇἈἉἊἋἌἍἎἏἐἑἒἓἔἕἘἙἚἛἜἝἠἡἢἣἤἥἦἧἨἩἪἫἬἭἮἯἰἱἲἳἴἵἶἷἸἹἺἻἼἽἾἿὀὁὂὃὄὅὈὉὊὋὌὍὐὑὒὓὔὕὖὗὙὛὝὟὠὡὢὣὤὥὦὧὨὩὪὫὬὭὮὯὰάὲέὴήὶίὸόὺύὼώᾀᾁᾂᾃᾄᾅᾆᾇᾈᾉᾊᾋᾌᾍᾎᾏᾐᾑᾒᾓᾔᾕᾖᾗᾘᾙᾚᾛᾜᾝᾞᾟᾠᾡᾢᾣᾤᾥᾦᾧᾨᾩᾪᾫᾬᾭᾮᾯᾰᾱᾲᾳᾴᾶᾷᾸᾹᾺΆᾼ᾽ι᾿῀῁ῂῃῄῆῇῈΈῊΉῌ῍῎῏ῐῑῒΐῖῗῘῙῚΊ῝῞῟ῠῡῢΰῤῥῦῧῨῩῪΎῬ῭΅`ῲῳῴῶῷῸΌῺΏῼ´῾
Cyrillic
ЀЁЂЃЄЅІЇЈЉЊЋЌЍЎЏАБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдежзийклмнопрстуфхцчшщъыьэюяѐёђѓєѕіїјљњћќѝўџѠѡѢѣѤѥѦѧѨѩѪѫѬѭѮѯѰѱѲѳѴѵѶѷѸѹѺѻѼѽѾѿҀҁ҂҃҄҅҆҇҈҉ҊҋҌҍҎҏҐґҒғҔҕҖҗҘҙҚқҜҝҞҟҠҡҢңҤҥҦҧҨҩҪҫҬҭҮүҰұҲҳҴҵҶҷҸҹҺһҼҽҾҿӀӁӂӃӄӅӆӇӈӉӊӋӌӍӎӏӐӑӒӓӔӕӖӗӘәӚӛӜӝӞӟӠӡӢӣӤӥӦӧӨөӪӫӬӭӮӯӰӱӲӳӴӵӶӷӸӹӺӻӼӽӾӿ
Unicode symbols
–—―‗‘’‚‛“”„†‡•…‰′″‹›‼‾⁄⁊
Others
ㄅㄉㄓㄚㄞㄢㄦㄆㄊㄍㄐㄔㄗㄧㄛㄟㄣㄇㄋㄎㄑㄕㄘㄨㄜㄠㄤㄈㄏㄒㄖㄙㄩㄝㄡㄥ
ぁぃぅぇぉかきくけこんさしすせそたちつってとゐなにぬねのはひふへほゑまみむめもゃゅょゎを
ァィゥヴェォカヵキクケヶコサシスセソタチツッテトヰンナニヌネノハヒフヘホヱマミムメモャュョヮヲ
®☃︎⌘✉︎
😂🤣👻👽