版式

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

  1. Aenean
  2. vel
  3. libero
  4. eget
  5. 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

(() => 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.
~~~

Images

An :apple: a day, keeps :woman_health_worker: :man_health_worker: away.

markdown:

![](path-to-image)

With ALT

Image

markdown:

![Image](path-to-image)

With Title

Image

markdown:

![Image](path-to-image "Image")

Specify Width and Height

Image

markdown:

![Image](path-to-image){:width="128px" height="128px"}

Image

markdown:

![Image](path-to-image){:width="64px" height="64px"}

Links

TeXt

markdown:

[TeXt](https://github.com/kitian616/jekyll-TeXt-theme/)

With Title

TeXt

markdown:

[TeXt](https://github.com/kitian616/jekyll-TeXt-theme/ "TeXt")

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"

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.

Documentation

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.

Documentation

Audio

SoundCloud

Netease Cloud Music (网易云音乐)

Available in Chinese mainland.

Video

YouTube

TED

bilibili (哔哩哔哩)

Slide

SlideShare

Demos

CodePen

Additional Styles

Success!

success info warning error

Image

Image

CLICK ME
CLICK ME
CLICK ME
CLICK ME

Documentation

Alert

Success Text.

Info Text.

Warning Text.

Error Text.

Tag

success

info

warning

error

Image

Border Shadow
Image Image
Rounded Circle
Image Image

Mixture

Border+Rounded Circle+Shadow
Image Image
Rounded+Shadow Circle+Border+Shadow
Image Image

Extra

Name Description
Spacing Doc
Grid Doc
Icons Doc
Image Doc
Button Doc
Item Doc
Card Doc
Hero Doc
Swiper Doc
  1. Here is the footnote. 

  2. Here’s one with multiple blocks.

    Subsequent paragraphs are indented to show that they belong to the previous footnote.