Style Guide - Media & Shortcodes

This page demonstrates all available media embeds and shortcodes available on this cybersecurity blog.

Photo Galleries

Basic Gallery

Screenshot 1

Screenshot 2

Screenshot 3

× ❮ ❯

Twitter Facebook Pinterest Copy Link

Screenshot 1

Screenshot 2

Screenshot 3

Filterable Gallery with Tags

All recon exploit post-exploit

Nmap Scan

SQL Injection

Directory Enumeration

Remote Code Execution

Privilege Escalation

Lateral Movement

× ❮ ❯

Twitter Facebook Pinterest Copy Link

Nmap Scan

SQL Injection

Directory Enumeration

Remote Code Execution

Privilege Escalation

Lateral Movement

Features:

• Click any image to open lightbox
• Use arrow keys or navigation buttons
• Click share button to share on social media
• Filter by category tags

Audio Support

Local MP3 File

Usage:

{{< audio src="/audio/file.mp3" title="Audio Title" caption="Audio description" >}}

SoundCloud Embeds

Example SoundCloud Track

Usage:

{{< soundcloud
    url="https://soundcloud.com/user/track-name"
    height="166"
    title="Track Title"
    caption="Track description"
>}}

How to get the URL:

1. Go to your SoundCloud track
2. Copy the full URL (e.g., https://soundcloud.com/username/track-name)
3. Paste it in the url parameter

Spotify Embeds

Spotify Track

Spotify Playlist

Usage:

{{< spotify
    url="https://open.spotify.com/embed/track/TRACK_ID"
    type="track"
    height="152"
    title="Song Title"
    caption="Song description"
>}}

How to get the embed URL:

1. Go to your Spotify track/playlist/album
2. Click the three dots (…) > Share > Embed track
3. Copy the URL from the iframe src (e.g., https://open.spotify.com/embed/track/...)
4. Use types: track, playlist, album, or episode

YouTube Videos

YouTube Embed

Usage:

{{< video
    src="VIDEO_ID"
    type="youtube"
    title="Video Title"
    caption="Video description"
>}}

How to get YouTube Video ID:

• From URL: https://www.youtube.com/watch?v=dQw4w9WgXcQ
• Video ID is: dQw4w9WgXcQ

Vimeo Videos

Vimeo Embed

Usage:

{{< video
    src="VIDEO_ID"
    type="vimeo"
    title="Video Title"
    caption="Video description"
>}}

How to get Vimeo Video ID:

• From URL: https://vimeo.com/123456789
• Video ID is: 123456789

Quick Reference

Gallery Shortcode

{{< gallery
    images="img1.png,img2.png,img3.png"
    captions="Caption 1|Caption 2|Caption 3"
    tags="recon,exploit,post-exploit"
    filterable="true"
    columns="3"
    id="unique-id"
>}}

Audio Shortcode

{{< audio
    src="/audio/file.mp3"
    title="Audio Title"
    caption="Description"
>}}

SoundCloud Shortcode

{{< soundcloud
    url="https://soundcloud.com/user/track"
    height="166"
    title="Title"
    caption="Description"
>}}

Spotify Shortcode

{{< spotify
    url="https://open.spotify.com/embed/track/ID"
    type="track"
    height="152"
    title="Title"
    caption="Description"
>}}

Video Shortcode (YouTube/Vimeo)

{{< video
    src="VIDEO_ID"
    type="youtube"
    title="Title"
    caption="Description"
>}}

Tips & Best Practices

For Galleries:

• Use filterable="true" when you have 6+ images with categories
• Optimal column count: 3 for desktop, auto-adjusts for mobile
• Tags are comma-separated per image, separated by pipes
• Each gallery needs a unique id if you have multiple galleries on one page

For Audio/Video:

• Host MP3 files in /static/audio/ directory
• Keep audio files under 10MB for best performance
• For videos, use YouTube or Vimeo for better streaming
• Always include captions for accessibility

For Embeds:

• SoundCloud URLs should be the full track URL
• Spotify URLs must be the embed URL (not the regular URL)
• YouTube/Vimeo only need the video ID, not the full URL
• Test embeds in private browsing to ensure they work

Terminal & Shell Shortcodes

SQL Terminal

Display SQL commands with automatic database context and type indication:

SELECT * FROM users WHERE role = 'admin';

Usage:

{{< sql database="webapp_db" type="MySQL" lang="sql" >}}
SELECT * FROM users WHERE role = 'admin';
{{< /sql >}}

Parameters:

• database - Database name (shown in title)
• type - Database type: MySQL, PostgreSQL, MSSQL, SQLite (default: MySQL)
• title - Custom terminal title (overrides auto-generated title)
• prompt - Custom SQL prompt (default: mysql>)
• lang - Syntax highlighting language (e.g., sql)
• highlight - Line numbers to highlight (e.g., "1 3-5")

Title Generation:

• If title is set: Uses custom title
• If database is set: Shows “MySQL - webapp_db”
• Otherwise: Shows “MySQL Terminal”

Shell Terminal

Generic shell terminal for Linux/Unix commands:

Usage:

{{< shell title="File Listing" root="true" >}}
ls -la /var/www/html
{{< /shell >}}

Parameters:

• title - Terminal title (default: Shell)
• prompt - Custom prompt character (default: $)
• root - Set to "true" to show # instead of $
• lang - Syntax highlighting language
• highlight - Line numbers to highlight

Attacker Terminal

Red team / attacker machine terminal with distinctive styling:

Usage:

{{< attacker prompt="kali@attacker" pwd="/opt/tools" root="true" >}}
nmap -sC -sV 10.10.10.100
{{< /attacker >}}

Parameters:

• prompt - Custom prompt (default: attacker@kali)
• pwd - Current working directory (default: ~)
• root - Set to "true" to show # instead of $
• lang - Syntax highlighting language
• highlight - Line numbers to highlight

Features:

• Red-themed terminal styling
• Shows full prompt with pwd and privilege indicator
• Perfect for documenting attacker commands in writeups

Target Terminal

Target / victim machine terminal with distinctive styling:

Usage:

{{< target prompt="www-data@victim" pwd="/var/www" root="false" >}}
whoami
{{< /target >}}

Parameters:

• prompt - Custom prompt (default: victim@target)
• pwd - Current working directory (default: ~)
• root - Set to "true" to show # instead of $
• lang - Syntax highlighting language
• highlight - Line numbers to highlight

Features:

• Blue-themed terminal styling
• Shows full prompt with pwd and privilege indicator
• Perfect for documenting target/victim commands in writeups

Command Prompt (Windows CMD)

Windows Command Prompt terminal:

Usage:

{{< cmd path="C:\\Users\\Administrator\\Desktop" lang="batch" >}}
dir /a
{{< /cmd >}}

Parameters:

• path - Current directory path (default: C:\Users\Administrator)
• lang - Syntax highlighting language (e.g., batch)
• highlight - Line numbers to highlight

PowerShell

Windows PowerShell terminal:

Usage:

{{< powershell user="Administrator" path="C:\\Windows\\System32" lang="powershell" >}}
Get-Process | Where-Object {$_.CPU -gt 100}
{{< /powershell >}}

Parameters:

• user - Username (default: Administrator)
• path - Current directory path (default: C:\Users\Administrator)
• lang - Syntax highlighting language (e.g., powershell)
• highlight - Line numbers to highlight

Collapsible Output

Display long command outputs in a collapsible block to save space:

Starting Nmap 7.94 ( https://nmap.org )
Nmap scan report for 10.10.10.100
Host is up (0.045s latency).
Not shown: 997 closed ports
PORT    STATE SERVICE
22/tcp  open  ssh
80/tcp  open  http
443/tcp open  https

Usage:

{{< output title="Nmap Full Port Scan" collapsed="true" lang="text" >}}
[Your long output here]
{{< /output >}}

Parameters:

• title - Output block title (default: Command Output)
• collapsed - Start collapsed: "true" or "false" (default: "true")
• lang - Syntax highlighting language
• highlight - Line numbers to highlight
• id - Custom ID for targeting multiple outputs

Features:

• Click header to expand/collapse
• Saves space for long outputs
• Visual indicator shows collapse state
• Auto-generated ID based on content

Security-Specific Shortcodes

Credentials Block

Display discovered credentials in a formatted, easy-to-read block:

Usage:

{{< credentials
    service="SSH Access"
    user="root"
    password="toor123"
    host="10.10.10.100"
    port="22"
    notes="Credentials found via SQL injection"
>}}

Parameters:

• service - Service name (default: Service)
• user - Username
• password - Password
• url - Service URL (optional)
• host - Hostname/IP (optional)
• port - Port number (optional)
• notes - Additional notes (optional)
• id - Custom ID for multiple credential blocks

Features:

• Lock icon and clean formatting
• All fields displayed with labels
• Perfect for documenting findings in writeups
• Supports optional fields (url, host, port, notes)

Hash Display

Display password hashes with automatic type detection and formatting:

Usage:

{{< hash type="MD5" title="User Password Hash" >}}
5f4dcc3b5aa765d61d8327deb882cf99
{{< /hash >}}

Parameters:

• type - Hash type: MD5, SHA1, SHA256, NTLM, etc. (default: hash)
• title - Descriptive title (optional)
• id - Custom ID for multiple hash blocks

Features:

• Automatic hash type labeling
• Monospace formatting for readability
• Optional title for context
• Clean, professional display

More Shortcodes

For terminal outputs, timelines, admonitions, and other shortcodes, see the Terminal Shortcodes Demo.

Post Features

Reading Progress Bar

The reading progress bar automatically appears on all blog posts and articles. It shows your reading progress with a gradient bar at the top of the page.

Features:

• Automatically appears on post pages
• Shows percentage of page scrolled
• Smooth animation as you scroll
• Uses site’s orange-to-blue gradient
• No configuration needed - it just works!

How it works: The progress bar tracks your scroll position and updates in real-time as you read through the article.

Series Support

For multi-part posts, you can create a series navigation box that shows all posts in the series and provides easy navigation between them.

Example:

Usage:

{{< series
    title="Series Title"
    description="Series description"
    posts="Post 1|Post 2|Post 3|Post 4"
    current="2"
>}}

Parameters:

• title - The name of your series
• description - Brief description of what the series covers
• posts - Pipe-separated list of post titles (e.g., “Part 1|Part 2|Part 3”)
• current - The current post number in the series (1-indexed)

Features:

• Shows all posts in the series
• Highlights the current post with “You are here” badge
• Automatic Previous/Next navigation
• Numbered list for easy reference
• Beautiful gradient design matching site theme
• Responsive for mobile devices

Best Practices:

1. Add the series shortcode at the top of each post in the series
2. Keep post titles concise (under 50 characters works best)
3. Update the current parameter for each post in the series
4. Include a brief description to give readers context

Complete Feature List

Automatic Features (No Setup Required):

• Reading Progress Bar - Tracks scroll position on all posts

Terminal Shortcodes:

• SQL Terminal - SQL commands with database context and type (MySQL, PostgreSQL, MSSQL, SQLite)
• Shell Terminal - Generic Linux/Unix shell commands
• Attacker Terminal - Red team / attacker machine (red-themed)
• Target Terminal - Target / victim machine (blue-themed)
• Command Prompt - Windows CMD terminal
• PowerShell - Windows PowerShell terminal
• Collapsible Output - Expandable/collapsible command output blocks

Security-Specific Shortcodes:

• Credentials Block - Formatted credential display with service, user, password, optional URL/host/port
• Hash Display - Password hash display with type labeling (MD5, SHA256, NTLM, etc.)
• CTF Flags - Special formatting for CTF flags

Media & Content Shortcodes:

• Galleries - Filterable photo galleries with lightbox and sharing
• Audio Players - Local MP3 file playback
• SoundCloud Embeds - Embed SoundCloud tracks/playlists
• Spotify Embeds - Embed Spotify tracks/playlists/albums
• YouTube/Vimeo - Responsive video embeds

Organization & Layout Shortcodes:

• Tabs - Tabbed content containers
• Collapsible - Accordion/expandable sections
• Split View - Side-by-side comparisons
• Series Navigation - Multi-part post series support
• Timelines - Event timelines for engagement recaps

Documentation Shortcodes:

• Admonition Boxes - Notes, warnings, tips, info alerts
• Code Diff - Display code changes
• File Tree - Directory structure visualization
• Quotes - Enhanced blockquotes with citations
• Mermaid Diagrams - Flowcharts and diagrams
• ASCII Art - Preserve ASCII art formatting

Utility Shortcodes:

• Copy Buttons - One-click copy for commands
• Badges - Inline status/severity badges
• Keyboard Shortcuts - Display key combinations (e.g., Ctrl+C)
• Progress Bars - Visual stats/progress indicators

Need Help?

For more examples of shortcodes and features, check out:

• Terminal Shortcodes Demo - More examples and documentation

All shortcodes are designed with security, performance, and accessibility in mind.