Extended Markdown syntax

Posted on Edited on In Word count in article: 1.1k Reading time ≈ 4 mins.

This post shows tag plugins, an extension of Markdown syntax, in Hexo static site generator and the Next theme documentation

Some of the built-in tags have been dropped (gist, youtube, jsfiddle, and vimeo). If you use those tags in your existing blog posts, you can install hexo-tag-embed to continue using them with Hexo v7.0.0.

Quotes

Centered Quote

Centered Quote@Hexo

1
2
3
{% centerquote %}Something{% endcenterquote %}
<!-- Or in short -->
{% cq %}Something{% endcq %}

Elegant in code, simple in core

Pull Quote

Pull Quote@Hexo

Similar to the regular markdown > quote.

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

content

Block Quote

Block Quote @ Hexo

With author and book title.

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

Code blocks

Hexo tag plugin

Code Block @ Hexo

1
2
3
4
5
6
7
8
{% codeblock [title] [lang:language] [url] [link text] [additional options] %}
code snippet
{% endcodeblock %}

{% codeblock _.compact lang:javascript http://underscorejs.org/#compact Underscore.js %}
_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]
{% endcodeblock %}
_.compactUnderscore.js
1
2
_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]

Include code

Include Code @ Hexo

The directory containing code is defined at code_dir option in _config.yml, default to code_dir: downloads/code, corresponding to ${SITE}/source/downloads/code

1
{% include_code [title] [lang:language] [from:line] [to:line] path/to/file %}
1
{% include_code lang:bash bootstrap-conda.sh %}

Link to other post

Include Posts @ Hexo

1
{% post_link filename [title] [escape]  %}

Image

Image@Hexo

1
2
3
4

{% img [class names] /path/to/image [width] [height] '"title text" "alt text"' %}

{% img https://octodex.github.com/images/stormtroopocat.jpg 200 200 '"The Stormtroopocat" "Alt text"' %}
Alt text

Videos

Direct URL

video @ Next

1
{% video https://upload.wikimedia.org/wikipedia/commons/transcoded/c/c4/Physicsworks.ogv/Physicsworks.ogv.240p.vp9.webm %}

PDF files

pdf @ Next

You'll need to enable pdf support in next theme's config

next/_config.next.yml
1
2
3
pdf:
  enable: true
  height: 500px  # Default height
1
{% pdf url [height] %}
  1. Only browsers supporting PDF embedding are supported.
  2. PDF file loading may be block by the CORS policy.

Note

note @ Next. Similar to admonitions @ Hugo LoveIt.

_config.next.yml
1
2
3
4
5
6
7
8
9
10
11
12
# Note tag (bs-callout)
note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: simple
  icons: true
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
{% note %}
### Header
(without define class style)
{% endnote %}

{% note default %}
### Default Header
Welcome to [Hexo!](https://hexo.io)
{% endnote %}

{% note primary %}
### Primary Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

{% note info %}
### Info Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

{% note success %}
### Success Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

{% note warning %}
### Warning Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

{% note danger %}
### Danger Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

{% note info no-icon %}
### No icon note
Note **without** icon: `note info no-icon`

note info, note info, note info
note info, note info, note info
note info, note info, note info
{% endnote %}

{% note success %}
### Codeblock in note
{% code %}
code block in note tag
code block in note tag
code block in note tag
{% endcode %}
{% endnote %}

{% note default %}
### Table in Note
| 1 | 2 |
| - | - |
| 3 | 4 |
| 5 | 6 |
| 7 | 8 |
{% endnote %}

(without define class style)

Default Header

Welcome to Hexo!

Primary Header

Welcome to Hexo!

Info Header

Welcome to Hexo!

Success Header

Welcome to Hexo!

Warning Header

Welcome to Hexo!

Danger Header

Welcome to Hexo!

No icon note

Note without icon: note info no-icon

note info, note info, note info note info, note info, note info note info, note info, note info

Codeblock in note

1
2
3
code block in note tag
code block in note tag
code block in note tag

Table in Note

1 2
3 4
5 6
7 8

Tabs

tabs @ Next

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs Sixth Unique name %}
<!-- tab Solution 1@text-width -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab Solution 2 @font -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab Solution 3@bold -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

Define a tab via <!-- tab title @icon --> ... <!-- endtab -->. Both title and font are optional.

Label

label @ Next

Similar to ==mark== in markdown-it, but with more options.

1
2
3
4
5
Lorem {% label @ipsum %} {% label primary@dolor sit %} amet, consectetur {% label success@adipiscing elit, %} sed {% label info@do eiusmod %} tempor incididunt ut labore et dolore magna aliqua.

Ut enim *{% label warning @ad %}* minim veniam, quis **{% label danger@nostrud %}** exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate ~~{% label default @velit %}~~ <mark>esse</mark> cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Button

button @ Next

1
2
3
4
5
6
7
8
9
{% btn #, Text %}{% btn #, Text & Title,, Title %}

<!-- with icon -->

<div>{% btn #,, home %}{% btn #,, home %}{% btn #,, home %}</div>

<p>{% btn #, Text & Icon (buggy), home %}
{% btn #, Text & Icon (fixed width), home fa-fw %}</p>

TextText & Title

Text & Icon (buggy) Text & Icon (fixed width)

Others

  • link-grid
  • iframes
  • Group Pictures
  • Caniuse