Tag Plugin Plus Overview

even629

2026-07-11 (Updated: 2026-07-12)

Timeline

2026-07-11

init

This article introduces the rendering support test of the current theme for standard Markdown and extended syntax, and provides a detailed overview of the Tag Plugin Plus tags ported from the Butterfly theme to the Cactus theme, including the syntax and rendering effects of components such as link cards, inline text tags, prompts, collapsible boxes, timelines, and tab pages.

Markdown Basic Syntax

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

Heading Levels

h1 Level 1 Heading

h2 Level 2 Heading

h3 Level 3 Heading

h4 Level 4 Heading

h5 Level 5 Heading

h6 Level 6 Heading

Inline Formatting

Bold Text、Italic text、Bold italic text、~~Strikethrough text~~、行内代码

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

Highlight (mark) boundary

Continuous highlight: First paragraph and Second paragraph with normal text in between.

Highlight embedded formatting: Bold +代码+ ~~Strikethrough~~ Mixed inline syntax.

Highlighted text within a blockquote.

Scene	Example
Highlight in table	Cell highlight
Highlighted with link	even629

Link

Image

Normal image

Avatar

Image with title

Avatar

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

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

Task List

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

Task list boundary

Read Hexo documentationandtake notes
Runhexo slocal preview
Submit~~draft~~official version
Normal list item (mixed with task items)
- Nested task, containing行内代码
- Nested task completed

Blockquote

Single-level blockquote

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

Nested blockquote

First-level blockquote
Second-level blockquote
Third-level blockquote

Blockquote with other elements

Heading inside blockquote
List item 1
List item 2
1
console.log("hello")
Continue nesting

Code

Inline Code

Use theprint()function to output content.

Fenced Code Block

#include <stdio.h>

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

Specify Language in 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 Block

1
2
3

<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	Center	Right
Cell	Cell	Cell

Inline Formatting in Table

Name	Description
Bold	Bold text
`代码`	`行内代码`
Link	Click me
Mixed	Bold +`代码`+ ~~Strikethrough~~

Horizontal rule

Footnote

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

Emoji

😆 🚀 ❤️ 👍 💯 🔥 💪 👏

escape characters

*Will not become italic* `不会变成代码`~Will not become strikethrough~

Mathematical formulas (KaTeX)

Inline formula

Mass-energy equivalence: $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}$

Tag Plugin Plus external tags

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

Link card (link)

Link with image

even629's blog

https://even629.com

Link without image

HexoOfficial website

https://hexo.io

Syntax:{% link 标题, 链接, 图片URL(可选) %}

Link card

Hexo

https://hexo.io

Cactus

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

Font Awesome

https://fontawesome.com

Syntax:{% link ... %}

Inline Image (inlineimage)

In a paragraph of textembed an inline small icon.

Custom Height:

Syntax:{% inlineimage 图片URL, height=高度(可选) %}

Inline Text Label

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

PressCtrl + Shift + IOpen developer tools.

This is a paragraph containingunderline、emphasisandwavy linemixed text.

Syntax:{% 标签名文字内容 %}— no closing tag

Colored paragraph (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 piece of text, which containsred textandblue text。

alignment

centered paragraph text

right-aligned paragraph text

Tip box

Basic style

Default style tip box

Info style tip

Success style tip (success prompt)

Warning style tip (warning prompt)

Danger style tip (danger prompt)

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 样式名 %} 内容 {% endtip %}— Styles: info / success / warning / danger / bolt / ban / home / sync / cogs / key / bell

Folding box

Default style

Click to expand for details

Content inside the folding box supportsMarkdownsyntax.

List item
行内代码

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

Color variant

Blue folding

Folding box with blue border

Red Collapse

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

Green Collapse

Green Collapse Box Content

Purple Collapse

Purple Collapse Box Content

Cyan Collapse

Cyan Collapse Box Content

Yellow Collapse

Yellow Collapse Box Content

Orange Collapse

Orange Collapse Box Content

Collapse Box Expanded by Default

Green Collapse Box Expanded by Default

This collapse box is expanded by default (addopenkeyword).

Table embedded in collapsible box

Table inside collapsible box

Name	Value
Attribute A	100
Attribute B	200

Nested collapsible boxes

Outer collapsible

Outer content

Inner collapsible

Inner content

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

Timeline

Blue Timeline

My Timeline

2024年

Started blogging and set up a Hexo site.

2025年

Migrated to the Cactus theme to optimize reading experience.

2026年

Improved plugin tags and added English translations.

Green Timeline

Project Progress

Requirements Analysis and Design

Core Feature Development

Testing and Deployment

Other Color Variants

Red Timeline

节点一

Red Timeline Node Content

节点二

ContainsBoldand代码’s node

Orange Timeline

橙色节点

Orange Timeline Node Content

Purple Timeline

紫色节点

Purple Timeline Node Content

Syntax:{% timeline 标题, 颜色 %} 内容 {% endtimeline %}— Color: blue / green / red / orange / purple

Tabs

Basic Tabs

C is a general-purpose procedural programming language.

1	printf("hello\n");

Rust is a systems programming language focused on safety.

1	println!("hello");

Python is a concise and elegant interpreted language.

1	print("hello")

Specify Default Active Tab

Content of the first tab

Content of the second tab

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

Tab with icons

Code-related content

Design-related content

Syntax:{% tabs 标题, 默认激活序号 %} 内容 {% endtabs %}— With icon:

Multi-level tabs (subtabs)

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

Content of sub-tab 1

Content of sub-tab 2

Content of first-level tab B.

Syntax: insidetabnestsubtabs/subsubtabs(same syntax astabs）

Note box

Four basic styles

Flat style note (default), suitable for general reminders.

Modern style note, clean solid background.

Simple style note, colored left border.

Disabled style note, gray tones.

Note with title

Important notes

Please read the documentation carefully before use.

Note with icon

Tip

A note reminder with a light bulb icon.

Warning

A note with a warning icon.

Note with embedded Markdown

Supportsbold、italic、代码and other inline formatting.

List item
Can also have code blocks

1	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 标题(可选), 图标(可选) %} 内容 {% endnote %}— Style controlled via CSS class

Progress bar

Basic colors

90% completed

60% in progress

30% blocked

Extended colors

info Progress

primary Progress

blue Progress

gray Progress

Boundary value

100% All completed

0% Not started yet

Syntax:{% progress 宽度百分比, 颜色, 标签文字 %}— Colors: success / warning / danger / info / primary / blue / gray

Checkbox

Default state

Apple

Banana

Strawberry

Selected state

Watermelon

Grape

Color variants

checkbox

Checkbox

Style Variant

Style

Cross Style

Radio Button

Option One

Option Two

Color and Style Overlay

Cross

Syntax:{% checkbox 文字, checked(可选) %}— Color/style placed before text:red/green/blue/yellow/cyan/plus/minus/times/radio

Bubble Annotation

Default Color

Move the mouse tothis word This is the annotation textto view the annotation.

Custom Color

another word another annotation

Continuous Bubbles

A sentence can havemultiple first annotationbubbles second annotationarranged in order.

Syntax:{% bubble 文字, 注释, 颜色(可选) %}— no closing tag, hover to show annotation

Reference tags (referto + referfrom)

Single reference

Reference mark in the text¹HexoOfficial documentation, click the number to jump to the reference at the end of the text.

Hexo Official documentation

Multiple references

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

The fourth reference⁴Super 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

Cactus Theme GitHub

Font Awesome Icon library

Super 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 '编号','文献名' %}In-text annotation +{% referfrom '编号','文献名','URL' %}End-of-text list
Hover over the number to preview the reference name, click to jump to the corresponding entry at the end of the text.

Content of the first footnote. ↩︎
The second footnote can containformattingand代码。 ↩︎

Markdown Basic Syntax

Heading Levels

h1 Level 1 Heading

h2 Level 2 Heading

h3 Level 3 Heading

h4 Level 4 Heading

h5 Level 5 Heading

h6 Level 6 Heading

Inline Formatting

Highlight (mark) boundary

Link

Normal link

Link with title

Reference-style link

Automatic link

Image

Normal image

Image with title

List

Unordered List

Ordered List

Task List

Task list boundary

Blockquote

Single-level blockquote

Nested blockquote

Blockquote with other elements

Heading inside blockquote

Code

Inline Code

Fenced Code Block

Specify Language in Code Block

Escaping in Code Block

Table

Basic Table

Align Table

Inline Formatting in Table

Horizontal rule

Footnote

Emoji

escape characters

Mathematical formulas (KaTeX)

Inline formula

Block-level formula

Tag Plugin Plus external tags

Link card (link)

Link with image

Link without image

Link card

Inline Image (inlineimage)

Inline Text Label

Style Overview

Combined use

Colored paragraph (p) and inline (span)

Color test

inline span

alignment

font size

Tip box

Basic style

Extended styles

Folding box

Default style

Color variant

Collapse Box Expanded by Default

Table embedded in collapsible box

Nested collapsible boxes

Timeline

Blue Timeline

Green Timeline

Other Color Variants

Tabs

Basic Tabs

Specify Default Active Tab

Tab with icons

Multi-level tabs (subtabs)

Note box

Four basic styles

Note with title

Note with icon