Hexo Cutie 主题 Markdown 语法

Hexo Cutie 主题 Markdown 语法

Hexo Cutie 主题 Markdown 语法

安装

文章使用 hexo-renderer-markdown-it作为渲染器,因此需要安装此渲染器以达到效果。

installation
1
2
3
4
5
6
npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it --save
npm i markdown-it-emoji --save
npm i markdown-it-mark --save
npm i markdown-it-deflist --save
npm i markdown-it-container --save

配置

添加以下内容到站点的_config.yml.

_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
markdown:
render:
html: true
xhtmlOut: false
breaks: false
linkify: true
typographer: true
quotes: '“”‘’'
plugins:
- markdown-it-abbr
- markdown-it-footnote
- markdown-it-ins
- markdown-it-sub
- markdown-it-sup
- markdown-it-deflist
anchors:
level: 2
collisionSuffix: 'v'
permalink: false
permalinkClass: header-anchor
permalinkSymbol: " "
permalinkBefore: false

使用


标题

source code
1
2
3
4
5
6
# h1 Heading 8-)
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading

h1 Heading 8-)

h2 Heading

h3 Heading

h4 Heading

h5 Heading
h6 Heading

水平分割线

source code
1
2
3
4
5
___

---

***



排版替换

source code
1
2
3
4
5
6
7
(c) (C) (r) (R) (tm) (TM) (p) (P) +-

test.. test... test..... test?..... test!....

!!!!!! ???? ,, -- ---

"Smartypants, double quotes" and 'single quotes'

(c) (C) (r) (R) (tm) (TM) (p) (P) +-

test.. test… test….. test?….. test!….

!!!!!! ???? ,, – —

“Smartypants, double quotes” and ‘single quotes’

着重

source code
1
2
3
4
5
6
7
8
9
**This is bold text**

__This is bold text__

*This is italic text*

_This is italic text_

~~Strikethrough~~

This is bold text

This is bold text

This is italic text

This is italic text

Strikethrough

引用

source code
1
2
3
> Blockquotes can also be nested...
>> ...by using additional greater-than signs right next to each other...
> > > ...or with spaces between arrows.

Blockquotes can also be nested…

…by using additional greater-than signs right next to each other…

…or with spaces between arrows.

清单

无序

source code
1
2
3
4
5
6
7
+ Create a list by starting a line with `+`, `-`, or `*`
+ Sub-lists are made by indenting 2 spaces:
- Marker character change forces new list start:
* Ac tristique libero volutpat at
+ Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
+ Very easy!
  • Create a list by starting a line with +, -, or *
  • Sub-lists are made by indenting 2 spaces:
    • Marker character change forces new list start:
      • Ac tristique libero volutpat at
      • Facilisis in pretium nisl aliquet
      • Nulla volutpat aliquam velit
  • Very easy!

有序

source code
1
2
3
4
5
6
1. Lorem ipsum dolor sit amet
1. Indented list
1. Another level
2. Indent
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
  1. Lorem ipsum dolor sit amet
    1. Indented list
      1. Another level
    2. Indent
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
source code
1
2
1. You can use sequential numbers...
1. ...or keep all the numbers as `1.`
  1. You can use sequential numbers…
  2. …or keep all the numbers as 1.

用偏移符号编号

source code
1
2
57. foo
1. bar
  1. foo
  2. bar

代码

source code
1
Inline `code`

Inline code

代码缩进

source code
1
2
3
4
// Some comments
line 1 of code
line 2 of code
line 3 of code
// Some comments
line 1 of code
line 2 of code
line 3 of code

代码区块

source code
1
2
3
```
Sample text here...
```
1
Sample text here...

语法高亮显示

source code
1
2
3
4
5
6
7
``` js sample.js
var foo = function (bar) {
return bar++;
};

console.log(foo(5));
```
sample.js
1
2
3
4
5
var foo = function (bar) {
return bar++;
};

console.log(foo(5));

表格

source code
1
2
3
4
5
| Option | Description |Description | Description | Description | Description |
| ------ | ----------- |----------- | ----------- | ----------- | ----------- |
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
Option Description Description Description Description Description
data path to data files to supply the data that will be passed into templates.
engine engine to be used for processing templates. Handlebars is the default.
ext extension to be used for dest files.

列右对齐

source code
1
2
3
4
5
| Option | Description |
| ------:| -----------:|
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
Option Description
data path to data files to supply the data that will be passed into templates.
engine engine to be used for processing templates. Handlebars is the default.
ext extension to be used for dest files.

链接

source code
1
[link text](http://dev.nodeca.com)

link text

source code
1
[link with title](http://nodeca.github.io/pica/demo/ "title text!")

link with title

source code
1
Autoconverted link https://github.com/nodeca/pica (enabled linkify)

Autoconverted link https://github.com/nodeca/pica (enabled linkify)

图片

source code
1
2
![Minion](https://octodex.github.com/images/minion.png)
![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")

Minion
Stormtroopocat

与链接一样,图片也有脚注样式语法

source code
1
2
3
4
5
![Alt text][id]

在文档的后面定义 URL 的位置

[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"

Alt text

在文档的后面定义 URL 的位置

插件

markdown-it 渲染器完美支持syntax plugins。例如 configuration snippet

Emojies

source code
1
2
3
Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:

Shortcuts (emoticons): :-) :-( 8-) ;)

Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:

Shortcuts (emoticons): :-) :-( 8-) ;)

上标 / 下标

source code
1
2
3
Superscript: 19^th^

Subscript: H~2~O

Superscript: 19^th^

Subscript: H2O

<ins>

source code
1
++Inserted text++

++Inserted text++

<mark>

source code
1
==Marked text==

==Marked text==

脚注

source code
1
2
3
4
5
6
7
8
9
10
11
12
13
Footnote 1 link[^first].

Footnote 2 link[^second].

Inline footnote^[Text of inline footnote] definition.

Duplicated footnote reference[^second].

[^first]: Footnote **can have markup**

and multiple paragraphs.

[^second]: Footnote text.

Footnote 1 link[^first].

Footnote 2 link[^second].

Inline footnote^[Text of inline footnote] definition.

Duplicated footnote reference[^second].

[^first]: Footnote can have markup

and multiple paragraphs.

[^second]: Footnote text.

定义列表

source code
1
2
3
Term 1
: 定义 1
带有延迟继续。.
Term 1
定义 1
带有延迟继续。
source code
1
2
3
4
5
6
第 2 项带有 * 内联标记 *
: 定义 2

{ some code, part of Definition 2 }

Third paragraph of definition 2.
Term 2 with inline markup
Definition 2
    { some code, part of Definition 2 }

Third paragraph of definition 2.

Compact style:

source code
1
2
3
4
5
6
Term 1
~ Definition 1

Term 2
~ Definition 2a
~ Definition 2b

Term 1
~ Definition 1

Term 2
~ Definition 2a
~ Definition 2b

缩略形式 / 缩写

source code
1
2
3
4
5
这是 HTML 缩写的例子。

它转换成 “HTML”,但保留“xxxHTMLyy” 等完整的部分条目。

*[HTML]:超文本标记语言

这是 HTML 缩写的例子。

它转换成 “HTML”,但保留“xxxHTMLyy” 等完整的部分条目

*[HTML]: Hyper Text Markup Language

Custom containers

::: warning
here be dragons
:::

Hexo 内置标签

引用,带作者名字

source code
1
2
3
{% blockquote David Levithan, Wide Awake %}
Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
{% endblockquote %}

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

David LevithanWide Awake

引用 Twitter

source code
1
2
3
{% blockquote @DevDocs https://twitter.com/devdocs/status/356095192085962752 %}
NEW: DevDocs now comes with syntax highlighting. http://devdocs.io
{% endblockquote %}

NEW: DevDocs now comes with syntax highlighting. http://devdocs.io

引用网络链接

source code
1
2
3
{% blockquote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %}
Every interaction is both precious and an opportunity to delight.
{% endblockquote %}

Every interaction is both precious and an opportunity to delight.

抽取引用

source code
1
2
3
{% pullquote %}
content
{% endpullquote %}

content

jsFiddle

source code
1
{% jsfiddle o2gxgz9r default light %}

Gist

source code
1
{% gist b6365e79be6052e7531e7ba6ea8caf23 'Sample gist' %}

iFrame

source code
1
{% iframe https://www.bing.com %}

新标签页打开链接

source code
1
{% link Google https://www.google.com default Google %}
Google

Youtube

source code
1
{% youtube l_lblj8Cq0o %}

原文链接


评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×