Extended Markdown syntax

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

The following sections will be

📄: source documentation

1
What you write in Markdown

What would be rendered

Quotes

Centered Quote

📄

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

Elegant in code, simple in core

Pull Quote

📄

Similar to the regular markdown quote.

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

content

Block Quote

📄

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

📄

1
2
3
{% codeblock [title] [lang:language] [url] [link text] [additional options] %}
code snippet
{% endcodeblock %}
1
2
3
4
{% 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]

Github gist

📄

1
{% gist sosiristseng/5406c151b54ed182bf8e57e1a2a4c57e %}

Include code

📄. The directory containing code is defined at code_dir option in _config.yml, default to downloads/code, corresponding to source/downloads/code

1
{% include_code [title] [lang:language] [from:line] [to:line] path/to/file %}
1
{% include_code lang:bash bootstrap-conda.sh %}
bootstrap-conda.shview raw
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#!/usr/bin/env bash

CONDA_PATH="${HOME}/conda"
CONDA_SH="${CONDA_PATH}/etc/profile.d/conda.sh"
CONDA_URL="https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh"

wget -O /tmp/conda.sh "${CONDA_URL}"
bash /tmp/conda.sh -bup "${CONDA_PATH}"

source "${CONDA_SH}"
conda activate base
conda init bash zsh
conda config --add channels conda-forge
conda config --set channel_priority strict
conda config --set default_threads "$(nproc)"
conda config --set auto_activate_base false
conda update -n base conda --yes
conda update --all --yes

# Install commonly-used packages
conda install jupyterlab seaborn scipy numpy pandas numba matplotlib --yes

Link to other post

📄.

1
{% post_link filename [title] [escape]  %}
1
{% post_link emoji "Emoji support" %}
Post not found: emoji Emoji support

Image

📄

1
{% img [class names] /path/to/image [width] [height] '"title text" "alt text"' %}
1
{% img https://octodex.github.com/images/stormtroopocat.jpg 200 200 '"The Stormtroopocat" "Alt text"' %}
Alt text

Videos

URL

📄

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

YouTube videos

📄

1
{% youtube JtUAAXe_0VI %}

Vimeo

📄

1
{% vimeo 63830488 %}

PDF files

📄

next/_config.yml

1
2
3
pdf:
enable: true
height: 500px # Default height
1
{% pdf url [height] %}
1
{% pdf pdf/sample.pdf 700px %}

pdf files are placed in source/pdf/ folder in this case.

  1. Only browsers supporting PDF embedding are supported.
  2. PDF file loading may be block by CORS policy.

Documents iframe

📄

View your documents inline by embedding the Google Docs Viewer into iframe.

1
{% iframe https://docs.google.com/viewer?url=FILEPATH&embedded=true [width] [height] %}
1
{% iframe "https://docs.google.com/viewer?url=https://gitlab.com/sosiristseng/sosiristseng.gitlab.io/uploads/55f69d2020662c7900269c2c9c4f6a40/file_example_PPT_250kB.ppt&embedded=true" %}

Note

📄. Similar to admonitions.

next/_config.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

📄

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

📄

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

📄

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)

📄

1
2
3
4
5
6
7
{% linkgrid %}
Theme NexT | https://theme-next.js.org/ | Stay Simple. Stay NexT. | img/apple-touch-icon-next.png
Theme NexT | https://theme-next.js.org/ | Stay Simple. Stay NexT. | img/apple-touch-icon-next.png
Theme NexT | https://theme-next.js.org/ | Stay Simple. Stay NexT. | img/apple-touch-icon-next.png
Theme NexT | https://theme-next.js.org/ | Stay Simple. Stay NexT. | img/apple-touch-icon-next.png
% Theme NexT | https://theme-next.js.org/ | Stay Simple. Stay NexT. | img/apple-touch-icon-next.png
{% endlinkgrid %}

Others