Installation
This post uses hexo-renderer-markdown-it
plugin as markdown processor, so please install it to achieve the effect.
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
Configuration
Add following to _config.yml
of your site.
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
Usage
Headings
# 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
Horizontal Rules
___
---
***
Typographic replacements
(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’
Emphasis
**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
Blockquotes
> 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.
Lists
Unordered
+ 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
- Marker character change forces new list start:
- Very easy!
Ordered
1. Lorem ipsum dolor sit amet
1. Indented list
1. Another level
2. Indent
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
- Lorem ipsum dolor sit amet
- Indented list
- Another level
- Indent
- Consectetur adipiscing elit
- Integer molestie lorem at massa
1. You can use sequential numbers...
1. ...or keep all the numbers as `1.`
- You can use sequential numbers…
- …or keep all the numbers as
1.
Start numbering with offset:
57. foo
1. bar
- foo
- bar
Code
Inline `code`
Inline code
Indented code
// 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
Block code “fences”
```
Sample text here...
```
Sample text here...
Syntax highlighting
``` js sample.js
var foo = function (bar) {
return bar++;
};
console.log(foo(5));
```
var foo = function (bar) {
return bar++;
};
console.log(foo(5));
Tables
| 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. |
Right aligned columns
| 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. |
Links
[link text](http://dev.nodeca.com)
[link with title](http://nodeca.github.io/pica/demo/ "title text!")
Autoconverted link https://github.com/nodeca/pica (enabled linkify)
Autoconverted link https://github.com/nodeca/pica (enabled linkify)
Images
![Minion](https://octodex.github.com/images/minion.png)
![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
Like links, Images also have a footnote style syntax
![Alt text][id]
With a reference later in the document defining the URL location:
[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
With a reference later in the document defining the URL location:
Plugins
The killer feature of markdown-it
is very effective support of
syntax plugins. The sample configuration snippet
Emojies
Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:
Shortcuts (emoticons): :-) :-( 8-) ;)
Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:
Shortcuts (emoticons): :-) :-( 8-) ;)
Subscript / Superscript
Superscript: 19^th^
Subscript: H~2~O
Superscript: 19^th^
Subscript: H2O
<ins>
++Inserted text++
++Inserted text++
<mark>
==Marked text==
==Marked text==
Footnotes
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.
Definition lists
Term 1
: Definition 1
with lazy continuation.
- Term 1
- Definition 1
with lazy continuation.
Term 2 with *inline markup*
: Definition 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:
Term 1
~ Definition 1
Term 2
~ Definition 2a
~ Definition 2b
Term 1
~ Definition 1
Term 2
~ Definition 2a
~ Definition 2b
Abbreviations
This is HTML abbreviation example.
It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.
*[HTML]: Hyper Text Markup Language
This is HTML abbreviation example.
It converts “HTML”, but keep intact partial entries like “xxxHTMLyyy” and so on.
*[HTML]: Hyper Text Markup Language
Custom containers
::: warning
here be dragons
:::
Hexo Built-in Tags
Blockquote with author
{% 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.
Blockquote for twitter
{% 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
Blockquote for weblink
{% 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.
Pull Quotes
{% pullquote %}
content
{% endpullquote %}
content
jsFiddle
{% jsfiddle o2gxgz9r default light %}
Gist
{% gist b6365e79be6052e7531e7ba6ea8caf23 'Sample gist' %}
iFrame
{% iframe https://www.bing.com %}
Link to open in new tab
{% link Google https://www.google.com default Google %}
Google
Youtube
{% youtube l_lblj8Cq0o %}