---
url: >-
  https://docs.corbitaltech.dev/products/whatsmark-saas/vitepress-features-demo.md
description: >-
  Demonstration of VitePress markdown features including code groups, line
  highlighting, and custom containers
---

# VitePress Features Demo

This page demonstrates the enhanced VitePress markdown features implemented in Phase 2.

## Code Groups (Tabbed Code Blocks)

Code groups allow you to show multiple code variants in tabs:

::: code-group

```bash [npm]
npm install whatsmark-saas
npm run dev
```

```bash [yarn]
yarn add whatsmark-saas
yarn dev
```

```bash [pnpm]
pnpm add whatsmark-saas
pnpm dev
```

:::

## Line Highlighting

Highlight specific lines to draw attention:

```js{4,7-9}
function connectWhatsApp(config) {
  const api = new WhatsAppAPI({
    apiKey: config.apiKey,
    baseURL: 'https://graph.facebook.com', // Highlighted: Important URL
  })

  // Highlighted section: Required headers
  const headers = {
    'Authorization': `Bearer ${config.token}`
  }

  return api.connect(headers)
}
```

## Code Annotations

Use inline annotations to highlight, focus, show diffs, and mark errors:

```php
class PaymentGateway
{
    public function process($amount)
    {
        $oldMethod = 'stripe'; // [!code --]
        $newMethod = 'tap'; // [!code ++]

        $apiKey = env('PAYMENT_KEY'); // [!code focus]

        if (!$apiKey) {
            return null; // [!code error]
        }

        // Deprecated: Use processPaymentV2() instead // [!code warning]
        return $this->legacy($amount);
    }
}
```

Legend:

* `[!code --]` - Removed code (red background)
* `[!code ++]` - Added code (green background)
* `[!code focus]` - Focused code (highlighted)
* `[!code error]` - Error code (red marker)
* `[!code warning]` - Warning code (yellow marker)

## Line Numbers

Add line numbers to code blocks:

```php:line-numbers
<?php

namespace App\Services;

class WhatsAppService
{
    public function sendMessage(string $to, string $message)
    {
        return $this->client->send($to, $message);
    }
}
```

## Custom Containers

### Info Container

::: info Information
This is an informational message with standard styling.
:::

### Tip Container

::: tip Pro Tip
Use environment variables for sensitive configuration like API keys and secrets.
:::

### Warning Container

::: warning Important
Always validate user input before processing payment transactions.
:::

### Danger Container

::: danger Critical
Never commit API keys or secrets to version control!
:::

## Collapsible Details

Use details containers for optional or advanced content:

::: details Click to expand: Advanced Configuration

```php
// Advanced payment gateway configuration
return [
    'gateway' => [
        'mode' => env('PAYMENT_MODE', 'test'),
        'test' => [
            'api_key' => env('TEST_API_KEY'),
            'secret_key' => env('TEST_SECRET_KEY'),
        ],
        'live' => [
            'api_key' => env('LIVE_API_KEY'),
            'secret_key' => env('LIVE_SECRET_KEY'),
        ],
        'webhook' => [
            'url' => env('WEBHOOK_URL'),
            'secret' => env('WEBHOOK_SECRET'),
        ],
        'timeout' => 30,
        'retry' => 3,
    ],
];
```

:::

## Custom Header Anchors

Headers with custom IDs for stable URLs:

### Installation Guide {#install}

You can link to [installation](#install) section using the custom anchor.

### Configuration Setup {#config}

Link to [configuration](#config) with a custom ID.

## Combined Example

Real-world example combining multiple features:

::: tip Payment Gateway Integration
Follow these steps to integrate a payment gateway:
:::

::: code-group

```bash [Install Dependencies]
# Install required packages
composer require stripe/stripe-php
npm install @stripe/stripe-js
```

```bash [Environment Setup]
# Add to .env file
STRIPE_API_KEY=sk_test_...
STRIPE_PUBLIC_KEY=pk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...
```

:::

```php{5,8-12}
// app/Services/StripeGateway.php
use Stripe\StripeClient;

public function charge($amount, $token) {
    $stripe = new StripeClient(env('STRIPE_API_KEY')); // [!code focus]

    try {
        // Create payment intent
        $intent = $stripe->paymentIntents->create([
            'amount' => $amount * 100,
            'currency' => 'usd',
            'payment_method' => $token,
        ]); // [!code focus]

        return $intent;
    } catch (\Exception $e) {
        throw new PaymentException($e->getMessage()); // [!code error]
    }
}
```

::: details Click to expand: Testing the integration

1. Use Stripe test cards:
   * Success: `4242 4242 4242 4242`
   * Decline: `4000 0000 0000 0002`

2. Test webhook locally:

   ```bash
   stripe listen --forward-to localhost:8000/webhook/stripe
   ```

3. Verify payment in Stripe Dashboard
   :::

## Summary

This demo showcases:

* **Code Groups** - Tabbed code blocks for multiple variants
* **Line Highlighting** - `{4,7-9}` syntax
* **Code Annotations** - `[!code ++]`, `[!code --]`, `[!code focus]`, `[!code error]`, `[!code warning]`
* **Line Numbers** - `:line-numbers` suffix
* **Custom Containers** - `::: info`, `::: tip`, `::: warning`, `::: danger`
* **Details Container** - `::: details` for collapsible content
* **Custom Anchors** - `{#custom-id}` for stable URLs

All features are VitePress-native with no external dependencies!