Shortcode Test Post :: Draft

Available Shortcodes Test

This document tests all available shortcodes in the ecwu-theme.

1. Figure Shortcode

The figure shortcode displays an image with optional caption and attribution.

2. Video Shortcode

The video shortcode embeds a video with optional loop and autoplay.

3. Embed Video Shortcode

The embed-video shortcode embeds videos from YouTube or Bilibili.

YouTube Example:

Bilibili Example:

4. PDF Shortcode

The pdf shortcode embeds a PDF document.

aspect options: “landscape” (default), “portrait”, “video”

5. Sidenote Shortcode

The sidenote shortcode creates an inline highlighted note.

6. Marginnote Shortcode

The ⊕ marginnote shortcode also creates an inline highlighted note (identical styling to sidenote).

7. Section Shortcode

The section shortcode helps create HTML sections with custom classes and IDs.

8. Gallery Shortcode

The gallery shortcode creates a horizontal scrolling gallery of images.

Shift + mouse scroll in the grid of images to see the rest.

Mountain landscape

Forest path

Lake view

Desert landscape

9. Gallery Image Shortcode

The gallery-image shortcode is used within the gallery shortcode (see above example).

10. Include HTML Shortcode

The include-html shortcode includes an external HTML file from the same directory.

11. Marmaid Shortcode

graph LR;
A[Lemons]-->B[Lemonade];
B-->C[Profit]

12. Alert Shortcode

The alert shortcode displays an alert box with a pen icon and customizable colors.

Basic usage:

With custom colors:

Available parameters:

• cardColor - Background color of the alert box
• iconColor - Color of the pen icon
• textColor - Color of the alert text

Shortcode Summary

All 13 shortcodes available in the theme:

1. figure - Display images with captions
2. video - Embed video files
3. embed-video - Embed YouTube/Bilibili videos
4. pdf - Embed PDF documents
5. sidenote - Inline highlighted notes
6. marginnote - Inline highlighted notes (same as sidenote)
7. section - Create custom HTML sections
8. gallery - Horizontal scrolling image gallery
9. gallery-image - Individual images within gallery
10. include-html - Include external HTML files
11. mermaid - Render Mermaid diagrams
12. alert - Display alert boxes with pen icon