Tag Plugin Plus External Tags Overview

---

Timeline

Timeline

2026-07-11

init

This article introduces the comprehensive features of Tag Plugin Plus external tags, and systematically tests the current theme's rendering support for standard Markdown and extended syntax. The article covers heading levels, inline formatting (bold, italic, strikethrough, highlight, superscript, subscript), links, images, lists (unordered, ordered, task lists), blockquotes, code blocks, tables (including cell merging), horizontal rules, footnotes, Emoji, escape characters, mathematical formulas (KaTeX), and Mermaid diagrams, among other rich content. It focuses on demonstrating horizontal and vertical merging of table cells, combined merging, and edge cases, and verifies the actual rendering effects of mathematical formulas and Mermaid diagrams, helping users fully understand the theme's level of support for Markdown syntax.

---

Markdown Basic Syntax

The following tests the current theme’s rendering support for standard Markdown and extended syntax.

---

Heading Levels

h1 Heading 1

h2 Heading 2

h3 Heading 3

h4 Heading 4

h5 Heading 5

h6 Heading 6

---

Inline Formatting

Bold text、Italic text、Bold italic text、Strikethrough text、Inline code

Highlighted text (if supported), superscript X², subscript H₂O (if the renderer supports it)

Highlight (mark) boundaries

Consecutive highlights: first paragraph and second paragraph with ordinary text in between.

Highlight with embedded formatting: Bold +Code+ Delete Mixed inline syntax.

Highlighted text inside a blockquote.

Scenario	example
Highlight in table	Cell Highlight
Highlight with links	even629

---

Links

Normal link

External link

Link with title

even629’s blog

Reference-style link

Hexo official website and Cactus theme

Automatic link

https://even629.com

---

Image

Linux

---

List

Unordered list

• First-level list item A
• First-level list item B
  • Second-level nested item B1
  • Second-level nested item B2
    • Third-level nested item
• First-level list item C

Ordered list

1. first step
2. Step 2
   1. Sub-step A of step 2
   2. Sub-step B of step 2
3. Step 3

Task list

• Completed task
• Incomplete task
• To-do item
  • Nested task item

Task list boundary

• Read Hexo documentation and Take notes
• Runhexo sLocal preview
• Commit Draft Official version
• Normal list item (mixed with task items)
  • Nested task, includingInline code
  • Nested task completed

---

Reference

Single-level quote

This is a quote text.
It can span multiple lines.

Nested quote

First-level quote

Second-level quote

Third-level quote

Quote with other elements embedded

Heading inside a quote

• List item 1
• List item 2

console.log("hello")

Continue nesting

---

Code

Inline code

Use in textprint()function to output content.

Fenced code block

#include <stdio.h>

int main() {
    printf("Hello, World!\n");
    return 0;
}

Specify language for code block

def fibonacci(n):
    a, b = 0, 1
    for _ in range(n):
        yield a
        a, b = b, a + b

print(list(fibonacci(10)))

fn main() {
    let msg = "Hello, 世界!";
    println!("{}", msg);
}

Escaping in code blocks

<div class="container">
  <p>Hello &amp; welcome</p>
</div>

---

Table

Basic table

Column A	Column B	Column C
Value 1	Value 2	Value 3
Value 4	Value 5	Value 6

Align table

Left align	Center align	Right align
Left	in	Right
Cell	Cell	Cell

Inline formatting in tables

Name	Description
Bold	Bold text
Code	Inline code
Links	Click me
Mixed	Bold +Code+ Delete

Cell merging (merge cells)

Through themarkdown-it-merge-cells-plusThe plugin merges cells on demand: entering a marker in a cell triggers merging; by default, adjacent identical cells are not merged.

• <- Merge the current cell intoleftcell (horizontal /colspan）
• ^- Merge the current cell intouppercell (vertical /rowspan）

The header row can only use<left-right merging, not up-down merging;^Only takes effect from the second body row onward (the first body row is directly below the header and cannot be merged into the header). The merged area must form a rectangle.

Horizontal merge (colspan)

Both the header and body use<Merge left:

Category	Front-end technology stack
Full stack
Backend	Node	Go

HeaderFront-end technology stackMerge the cell to the right (colspan=2); body textFull stackspans three columns.

Vertical merge (rowspan)

Body text uses^Merge upward:

Category	Item	Description
Frontend	HTML	Markup language
	CSS	Style language
	JS	Scripting language
Backend	Node	Runtime

FrontendUsing two^merge downward, spanning three rows (rowspan=3）。

Combined merge (colspan + rowspan)

<and^They can be mixed in the same table to form merged blocks spanning rows and columns:

Region		Q1
North		100
		200
South		300

HeaderRegionspans two columns; body textNorthsimultaneously spans two rows and two columns (rowspan=2 colspan=2), and only the cell below it remains200。

Boundary cases (invalid markup displayed as-is)

In the following scenarios, the markup does not trigger merging, and is literally</^rendered:

^	The ^ in the header is displayed as-is
^	The ^ in the first row of the body is displayed literally.
<	The < in the first column is displayed literally.
Data	Normal cell

Those in the header,^those in the first row of the body,^and those in the first column<are all no-ops and are displayed literally as text.

---

Separator line

---

---

---

---

Footnote

This is a paragraph with a footnote^[1], and here is another footnote^[2].

---

Emoji

😆 🚀 ❤️ 👍 💯 🔥 💪 👏

---

Escape characters

*Will not become italic* `Will not become code` ~will not become strikethrough~

---

Math formulas (KaTeX)

Inline math

Mass-energy equation:$E = mc^2$

Euler’s formula:$e^{i\pi} + 1 = 0$

Block-level formula

$$\sum_{i=1}^{n} x_i = x_1 + x_2 + \cdots + x_n$$

$$\int_{a}^{b} f(x)\,dx = F(b) - F(a)$$

$$\begin{bmatrix} 1 & 2 & 3 \\ 4 & 5 & 6 \\ 7 & 8 & 9 \end{bmatrix}$$

---

Mermaid diagrams

The following tests Mermaid flowchart rendering (the frontmatter of this article has setmermaid: true, enabling the mermaid library).

Flowchart

graph TD A[开始] --> B{是否登录?} B -- 是 --> C[进入主页] B -- 否 --> D[跳转登录] D --> E[输入凭证] E -->|成功| C E -->|失败| D C --> F[结束]

Sequence Diagram

sequenceDiagram participant U as 用户 participant S as 服务器 participant D as 数据库 U->>S: 发起请求 S->>D: 查询数据 D-->>S: 返回结果 S-->>U: 响应数据 Note over U,D: 一次完整的请求-响应流程

Gantt Chart

gantt title 项目开发计划 dateFormat YYYY-MM-DD section 设计 需求分析 :done, des1, 2026-07-01, 7d 原型设计 :done, des2, after des1, 5d section 开发 前端开发 :active, dev1, after des2, 10d 后端开发 : dev2, after des2, 12d section 测试 集成测试 : tst1, after dev1, 5d 上线部署 : tst2, after tst1, 2d

Pie Chart

pie title 博客文章分类占比 "Linux 内核/驱动" : 35 "ARM 架构" : 20 "QEMU 虚拟化" : 15 "编程语言" : 20 "其他" : 10

Class Diagram

classDiagram class Animal { +String name +int age +makeSound() void } class Dog { +fetch() void } class Cat { +purr() void } Animal <|-- Dog Animal <|-- Cat

State Diagram

stateDiagram-v2 [*] --> 草稿 草稿 --> 审核中: 提交 审核中 --> 已发布: 通过 审核中 --> 草稿: 驳回 已发布 --> [*] 草稿 --> [*]: 删除

Styled Node

graph LR A[普通节点] --> B(圆角节点) B --> C{决策节点} C -->|是| D[/平行四边形/] C -->|否| E[(数据库)] style A fill:#f9f,stroke:#333,stroke-width:2px style D fill:#9f9,stroke:#333 style E fill:#69f,stroke:#333,color:#fff

Syntax: use```mermaidFenced code block. Supports flowchart / sequence / gantt / pie / class / state and other diagram types, see Mermaid documentation. You need to set it in frontmattermermaid: trueOnly then will the mermaid library be loaded and rendered.

---

---

Tag Plugin Plus plugin tags

The following shows all the plugin tags and their variants ported from Butterfly to Cactus.

---

Link Card

Link with image

even629's blog

https://even629.com

Link without image

HexoOfficial website

https://hexo.io

Syntax:{% link Title, Links, ImageURL(Optional) %}

---

Link Card

Hexo

https://hexo.io

Cactus

https://github.com/probberechts/hexo-theme-cactus

Font Awesome

https://fontawesome.com

Syntax:{% link ... %}

---

Inline Image

In a paragraph of text Embed a small inline icon.

Custom height:

Syntax:{% inlineimage ImageURL, height=Height(Optional) %}

---

Inline text tag

Style overview

Tag	Effect	Description
u	Underlined text	Underline
emp	Emphasized text	Emphasis mark
wavy	Wavy line text	Wavy underline
kbd	Ctrl + C	Keyboard key
psw	Password text	Password masking (visible on hover)
del	Deleted text	Strikethrough

Combined use

Press Ctrl + Shift + I Open developer tools.

This is a passage containingUnderline、EmphasisandWavy linemixed text.

Syntax:{% Tag name Text content %}— No closing tag

---

Colored paragraphs (p) and inline (span)

Color test

Red paragraph text

Blue paragraph text

Green paragraph

Yellow paragraph

Cyan paragraph

Purple paragraph

Gray paragraph

Inline span

This is a paragraph of text that containsRed textandBlue text。

Alignment

Centered paragraph text

Right-aligned paragraph text

Font size

Large font paragraph

Extra-large font paragraph

Syntax:{% p Color, Text %}/{% span Color, Text %}— Colors support both Chinese and English (red/red, blue/blue, etc.)

---

Tip box (tip)

Basic style

Default style tip box

Info style tip

Success style tip (success message)

Warning style tip (warning message)

Danger style tip (danger message)

Extended styles

Bolt style (lightning icon)

Ban style (prohibition icon)

Home style (homepage icon)

Sync style (sync icon)

Cogs style (gear icon)

Key style (key icon)

Bell style (bell icon)

Syntax:{% tip Style name %} content {% endtip %}— Styles: info / success / warning / danger / bolt / ban / home / sync / cogs / key / bell

---

Collapsible box (folding)

Default style

Click to expand to view details

Content in the collapsible box supports Markdown syntax.

• List item
• Inline code

console.log("折叠框内的代码");

Color variants

Blue collapsible

Collapsible box with blue border

Red collapsible

printf("红色折叠内的代码块\n");

Green collapsible

Green collapsible box content

Purple collapsible

Purple collapsible box content

Cyan collapsible

Cyan collapsible box content

Yellow collapsible

Yellow collapsible box content

Orange collapsible

Orange collapsible box content

Collapsible box expanded by default

Green collapsible box expanded by default

This collapsible box is expanded by default (addopenkeyword).

Collapsible box with embedded table

Table inside the collapsible box

Name	Value
Attribute A	100
Attribute B	200

Nested collapsible boxes

Outer collapsible

Outer content

Inner collapsible

Inner content

Syntax:{% folding [Color] [open], Title %} content {% endfolding %}— Color (optional): blue / red / green / purple / cyan / yellow / orange; addopenkeyword to make the collapsible box expanded by default

---

Timeline

Basic timeline

My timeline

2024年

Started writing a blog and set up a Hexo site.

2025年

Migrated to the Cactus theme and optimized the reading experience.

2026年

Improved the plugin tags and added English translations.

Timeline with content

Project progress

Q1

Requirements analysis and design

Q2

Core feature development

Q3

Testing and Deployment

Syntax:{% timeline Title %} content {% endtimeline %}- Node circles and vertical lines uniformly use the theme color; custom colors are no longer supported.

---

Tabs

Basic Tabs

CRustPython

C is a general-purpose procedural programming language.

printf("hello\n");

Rust is a systems programming language focused on safety.

println!("hello");

Python is a concise and elegant interpreted language.

print("hello")

Specify the default active tab

标签一标签二标签三（默认激活）

Content of the first tab

Content of the second tab

Content of the third tab, automatically displayed when the page loads.

Tabs with Icons

Code-related content

Design-related content

Syntax:{% tabs Title, Default active index %} content {% endtabs %}— With icon:<!-- tab @fa-icon-class -->

---

Multi-level Tabs (subtabs)

一级 A一级 B

This is the content of the first-level tab A.

子 1子 2

Content of sub-tab 1

Content of sub-tab 2

Content of first-level tab B.

Syntax: intabnested insidesubtabs/subsubtabs(same syntax astabs）

---

Annotation box (note)

Four basic styles

flat-style note (default), suitable for general reminders.

modern-style note, with a clean solid background.

simple-style note, with a colored left border.

disabled-style note, with gray tones.

Note with a title

Notes.

Please read the documentation carefully before use.

Note with an icon

Hint

Note reminder with a light bulb icon.

Warning

Note with a warning icon.

Markdown embedded in Note

Supports Bold、Italic、Codeand other inline formatting.

• List item
• It can also have code blocks.

const msg = "hello";

Title + icon + style combination

modern Modern style with title

A modern note with title, icon, and style all present.

simple Simple style with title

Simple style + title + light bulb icon.

disabled Disabled with title

Disabled style + title, no icon.

Syntax:{% note Title(Optional), Icon(Optional) %} content {% endnote %}— Style controlled via CSS classes

---

Progress bar

Basic colors

90% completed

60% in progress

30% blocked

Extended colors

info Progress

primary Progress

blue Progress

gray Progress

Boundary values

100% all completed

0% not started

Syntax:{% progress Width percentage, Color, Label text %}— Colors: success / warning / danger / info / primary / blue / gray

---

Checkbox

Default state

Apple

Banana

Strawberry

Selected state

Watermelon

Grape

Color variants

checkbox

checkbox

checkbox

checkbox

checkbox

Style variants

style

style

Cross style

Radio button

option one

option two

Color and style combination

cross

sign

Syntax:{% checkbox Text, checked(Optional) %}— Color/style placed before the text:red/green/blue/yellow/cyan/plus/minus/times/radio

---

Bubble annotation (bubble)

Default color

Move the mouse overthis word This is annotation text.to view the annotation.

Custom color

Another word Another annotation

Consecutive bubbles

A sentence can havemultiple First annotationBubble Second annotationarranged in sequence.

Syntax:{% bubble Text, Comment, Color(Optional) %}— No closing tag, hover displays annotation.

---

Reference tag (referto + referfrom)

Single reference

In-text citation marker¹HexoOfficial documentationClick the number to jump to the references at the end of the document.

1

Hexo Official documentation

Multiple citations

This is the second citation.²Cactus Theme GitHuband the third citation³Font Awesome Icon library。

The fourth citation.⁴Super long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long title test

2

Cactus Theme GitHub

3

Font Awesome Icon library

4

Super long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long title test

Syntax:{% referto 'Number','Reference title' %}In-text citation +{% referfrom 'Number','Reference title','URL' %}End-of-text list

Hover over the number to preview the reference title, and click to jump to the corresponding entry at the end of the document.

---

1. The first footnote content. ↩︎

2. The second footnote can containFormatandCode。 ↩︎