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:

npm

npm install whatsmark-saas
npm run dev

yarn

yarn add whatsmark-saas
yarn dev

pnpm

pnpm add whatsmark-saas
pnpm dev

Line Highlighting

Highlight specific lines to draw attention:

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:

class PaymentGateway
{
    public function process($amount)
    {
        $oldMethod = 'stripe'; 
        $newMethod = 'tap'; 

        $apiKey = env('PAYMENT_KEY'); 

        if (!$apiKey) {
            return null; 
        }

        // Deprecated: Use processPaymentV2() instead
        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

namespace App\Services;

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

Custom Containers

Info Container

Information

This is an informational message with standard styling.

Tip Container

Pro Tip

Use environment variables for sensitive configuration like API keys and secrets.

Warning Container

Important

Always validate user input before processing payment transactions.

Danger Container

Critical

Never commit API keys or secrets to version control!

Collapsible Details

Use details containers for optional or advanced content:

Click to expand: Advanced Configuration

// 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

You can link to installation section using the custom anchor.

Configuration Setup

Link to configuration with a custom ID.

Combined Example

Real-world example combining multiple features:

Payment Gateway Integration

Follow these steps to integrate a payment gateway:

Install Dependencies

# Install required packages
composer require stripe/stripe-php
npm install @stripe/stripe-js

Environment Setup

# Add to .env file
STRIPE_API_KEY=sk_test_...
STRIPE_PUBLIC_KEY=pk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...

// app/Services/StripeGateway.php
use Stripe\StripeClient;

public function charge($amount, $token) {
    $stripe = new StripeClient(env('STRIPE_API_KEY')); 

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

        return $intent;
    } catch (\Exception $e) {
        throw new PaymentException($e->getMessage()); 
    }
}

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:

   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!