output

Custom. Display expected command output with visual distinction from input commands.

Hugo shortcode

The output shortcode creates a visually distinct section for displaying expected command output. It adds an “Expected output:” label and applies a dark grey background to code blocks within it, helping differentiate command input from expected results.

{{< output >}}
Your expected output content goes here.
You can include code blocks with syntax highlighting.
{{< /output >}}

Usage with different languages

The shortcode supports all standard markdown code block syntax highlighting. You can include any language-specific code blocks within the output shortcode, and they will render with the dark grey background to distinguish them from command input.

Parameters

The output shortcode accepts two optional parameters:

Details title: If provided, wraps the output in a collapsible details section
Label text (default: “Example output:”):
- Use custom text to replace the default label
- Supports markdown formatting (e.g., backticks for code)
- Use "-" to hide the label entirely

Usage variants

{{< output >}}                                       <!-- Default label -->
{{< output "" "API Response:" >}}                   <!-- Custom label -->
{{< output "" "-" >}}                              <!-- No label -->
{{< output "Show output" >}}                        <!-- Collapsible with default label -->
{{< output "Click to expand" "Results:" >}}        <!-- Collapsible with custom label -->
{{< output "Show details" "-" >}}                  <!-- Collapsible with no label -->
{{< output "Expand" "Example `az` output:" >}}     <!-- Collapsible with markdown in label -->

Example with JSON output

Example output:

{
    "name": "@microsoft/workiq",
    "version": "0.2.8",
    "description": "MCP server for Microsoft 365 Copilot",
    "keywords": ["copilot", "m365", "mcp"],
    "bin": {
        "workiq": "./bin/workiq"
    }
}

Example with CLI output

Example output:

workiq.cmd ask --question "Who is my manager?"

Query: Who is my manager?
Result: Based on your organizational data, your manager is John Smith (john.smith@company.com).

Example with custom label

API Response:

{
    "success": true,
    "data": {
        "userId": "123",
        "email": "user@example.com"
    }
}

Example with no label

Connection established successfully
Authenticated as: admin@domain.com
Ready to proceed...

Example with collapsible details

Click to see full npm output

Example with custom collapsible label

Show debug output

Visual distinction

The output shortcode provides clear visual separation between:

Command input: Standard code blocks with the theme’s default styling
Expected output: Dark grey background (#161b22) matching the theme’s subtle canvas color

This helps readers quickly distinguish between what they should type and what they should expect to see.

Table of Contents