- h1. Headings
- H1. TeXt Heading
- Lists
- Tables
- Code Blocks
- Images
- Links
- Horizontal Rules
- Footnote
- Definition
- Blockquotes
- Emphasis
- MathJax
- Extensions
- Additional Styles
h1. Headings
h2. Heading
h3. Heading
h4. Heading
h5. Heading
h6. Heading
markdown:
# H1. TeXt Heading
## H2. TeXt Heading
### H3. TeXt Heading
#### H4. TeXt Heading
##### H5. TeXt Heading
###### H6. TeXt Heading
H1. TeXt Heading
H2. TeXt Heading
markdown:
H1. TeXt Heading
==================
H2. TeXt Heading
------
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
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!’); |
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
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 %}
Fenced Code Blocks
Here comes some code.
markdown:
~~~
Here comes some code.
~~~
Images
An a day, keeps away.
markdown:
![](path-to-image)
With ALT
markdown:
![Image](path-to-image)
With Title
markdown:
![Image](path-to-image "Image")
Specify Width and Height
markdown:
![Image](path-to-image){:width="128px" height="128px"}
markdown:
![Image](path-to-image){:width="64px" height="64px"}
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.
Horizontal Rules
* * *
***
*****
- - -
---------------------------------------
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.
Definition
- kramdown
- A Markdown-superset converter
- Maruku
- Another Markdown-superset converter
markdown:
kramdown
: A Markdown-superset converter
Maruku
: Another Markdown-superset converter
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
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**.
MathJax
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\]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
---
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
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 |