Markdown Rendering Stress Test

Welcome to the comprehensive stress test document for the LocalShare documentation engine. This page is designed to test how @tailwindcss/typography, react-markdown, and our custom react-syntax-highlighter integrations handle complex edge cases.

1. Typography & Formatting

Let's start with some basic inline formatting. We support bold text, italic text, and even strikethrough text (thanks to remark-gfm).

You can seamlessly integrate inline code like npm install localshare or const isAwesome = true; directly into your sentences. The inline code should have a subtle background and highlighted text color.

Blockquotes

Blockquotes should look elegant, especially in dark mode:

"Any fool can write code that a computer can understand. Good programmers write code that humans can understand."

— Martin Fowler

2. Lists and Structure

Unordered Lists (Nested)

• 📁 src/
  • 📁 app/
    • 📄 layout.tsx
    • 📄 page.tsx
  • 📁 components/
    • 📄 Navbar.tsx

Ordered Lists

1. First, download the installer from the homepage.
2. Double-click to extract the archive.
3. Move the binary to your applications folder:
   1. On macOS, drag to /Applications
   2. On Linux, move to /usr/local/bin

Task Lists (GFM)

• Set up Next.js App Router
• Configure Tailwind v4 & Typography
• Build custom Mac Terminal code blocks
• Write actual product documentation

3. Code Blocks (The Mac Terminal Test)

This is the real test. The code blocks below should render as beautiful, dark-themed Mac terminal windows with copy buttons.

Bash Script

bash
#!/bin/bash
# Install LocalShare via curl
echo "Downloading LocalShare..."
curl -fsSL [https://get.localshare.app/install.sh](https://get.localshare.app/install.sh) | bash

# Verify installation
localshare --version
echo "Installation complete! Ready to share."

TypeScript (React Component)

typescript
import React, { useState, useEffect } from 'react';
import { Download } from 'lucide-react';

interface TransferProps {
  fileName: string;
  fileSize: number;
}

export const TransferCard: React.FC<TransferProps> = ({ fileName, fileSize }) => {
  const [progress, setProgress] = useState<number>(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setProgress(p => (p < 100 ? p + 10 : 100));
    }, 500);
    return () => clearInterval(timer);
  }, []);

  return (
    <div className="glass-card p-4 rounded-xl">
      <h3>{fileName} ({(fileSize / 1024 / 1024).toFixed(2)} MB)</h3>
      <div className="w-full bg-slate-800 rounded-full h-2 mt-2">
        <div 
          className="bg-primary h-2 rounded-full transition-all" 
          style={{ width: `${progress}%` }} 
        />
      </div>
    </div>
  );
};

JSON Configuration

json
{
  "name": "localshare",
  "version": "2.0.4",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "react": "^18.2.0",
    "tailwindcss": "^4.0.0"
  }
}

4. Tables

Tables are often hard to style correctly, but Tailwind Typography handles them gracefully.

5. Links and References

Check out the LocalShare GitHub Repository for more information. If you encounter any issues, please open an issue in the issue tracker.

End of test document. If everything above looks perfect, your documentation engine is ready for production!