Available Shortcodes Test
This document tests all available shortcodes in the ecwu-theme.
The figure shortcode displays an image with optional caption and attribution.
Figure Title
This is a test figure with caption
Photo by Andrew Seaman
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.
This content is inside a custom section with class “my-custom-section” and id “test-section”.
8. Gallery Shortcode
The gallery shortcode creates a horizontal scrolling gallery of images.
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:
This is a basic alert message with default styling.
With custom colors:
This is a custom styled alert with yellow background.
Available parameters:
cardColor - Background color of the alert boxiconColor - Color of the pen icontextColor - Color of the alert text
Shortcode Summary
All 13 shortcodes available in the theme:
- figure - Display images with captions
- video - Embed video files
- embed-video - Embed YouTube/Bilibili videos
- pdf - Embed PDF documents
- sidenote - Inline highlighted notes
- marginnote - Inline highlighted notes (same as sidenote)
- section - Create custom HTML sections
- gallery - Horizontal scrolling image gallery
- gallery-image - Individual images within gallery
- include-html - Include external HTML files
- mermaid - Render Mermaid diagrams
- alert - Display alert boxes with pen icon
