Remote GitHub CSS Demo

Welcome to md2html-action Documentation

Welcome to md2html-action Documentation

This comprehensive documentation demonstrates the full capabilities of md2html-action, a powerful GitHub Action that converts Markdown files to beautiful, professional HTML with multiple themes and templates.

Explore our comprehensive documentation:

๐Ÿš€ Quick Start

The md2html-action works with pure vanilla Markdown - no frontmatter or special setup required! Just write standard Markdown and let the action handle the rest.

โœจ Features Being Tested

๐Ÿ Code Example

Hereโ€™s a comprehensive Python example showcasing syntax highlighting:

import asyncio
from typing import List, Optional
from dataclasses import dataclass

@dataclass
class User:
    """Represents a user in the system."""
    name: str
    email: str
    age: Optional[int] = None

    def greet(self) -> str:
        """Generate a personalized greeting."""
        return f"Hello, {self.name}! Welcome to md2html-action."

async def process_users(users: List[User]) -> None:
    """Process a list of users asynchronously."""
    tasks = [user.greet() for user in users]
    results = await asyncio.gather(*tasks)

    for result in results:
        print(result)

# Example usage
if __name__ == "__main__":
    users = [
        User("Alice", "alice@example.com", 30),
        User("Bob", "bob@example.com"),
        User("Charlie", "charlie@example.com", 25)
    ]

    asyncio.run(process_users(users))

๐Ÿ“Š Feature Status

Feature Status Notes
Markdown Conversion โœ… Working Full Pandoc integration
Default Template โœ… Working Clean, responsive layout
Minimal Template โœ… Working Lightweight styling
GitHub Template โœ… Working GitHub-like appearance
Academic Stylesheet โœ… Working Professional academic styling
Technical Stylesheet โœ… Working Modern tech company design
Blog Stylesheet โœ… Working Personal blog styling
Corporate Stylesheet โœ… Working Professional business design
Table of Contents โœ… Working Auto-generated navigation
Code Highlighting โœ… Working Syntax highlighting support
Math Rendering โœ… Working LaTeX math via Pandoc
Responsive Design โœ… Working Mobile-friendly layouts
GitHub Actions CI/CD โœ… Working Automated testing & deployment
Demo Gallery โœ… Working Interactive theme showcase
Custom CSS Integration โœ… Working External stylesheet support

๐ŸŒ Available Themes

The md2html-action includes 6 professional stylesheet themes:

๐ŸŽ“ Academic

Perfect for research papers, theses, and academic documentation. Features traditional typography, proper citations, and scholarly formatting.

๐Ÿ’ป Technical

Modern tech company design inspired by Stripe, Notion, and Linear. Features Inter fonts, gradient accents, and clean layouts ideal for API docs and developer guides.

๐Ÿ“ Blog

Personal blog styling with comfortable reading typography, engaging layouts, and social media integration hooks.

๐Ÿข Corporate

Professional business design suitable for company documentation, reports, and formal communications. Clean, authoritative styling.

๐ŸŽจ Default

Clean, responsive layout that works well for general documentation. Balanced typography and neutral color scheme.

โšก Minimal

Lightweight styling focused on performance and readability. Perfect for simple documentation sites.

๐Ÿ“ฑ Responsive Design Example

All themes are fully responsive. Try resizing your browser window to see how the layout adapts!

Device Type Layout Features Key Benefits
๐Ÿ“ฑ Mobile Single column layout Easy thumb navigation
๐Ÿ’ป Tablet Flexible grid system Optimized touch targets
๐Ÿ–ฅ๏ธ Desktop Full-width layouts Floating table of contents

๏ฟฝ Documentation Navigation

Explore the complete documentation:

๐Ÿงฎ Math Rendering Example

The action supports LaTeX math rendering via Pandoc for technical documentation:

Inline Math

Einsteinโ€™s famous equation: \(E = mc^2\) demonstrates mass-energy equivalence.

Block Math

The fundamental theorem of calculus:

\[ \frac{d}{dx}\left( \int_{a}^{x} f(t)\,dt\right) = f(x) \]

Complex equations with matrices:

\[ \begin{bmatrix} a & b \\ c & d \end{bmatrix} \begin{bmatrix} x \\ y \end{bmatrix} = \begin{bmatrix} ax + by \\ cx + dy \end{bmatrix} \]

๐Ÿ’ฌ Blockquote Styling

Pro Tip: The md2html-action is designed to work with pure vanilla Markdown.
You donโ€™t need any special setup, frontmatter, or configuration files.
Just write standard Markdown and the action handles everything else!

This makes it perfect for documentation that needs to be readable both as
Markdown source and as rendered HTML.

๐ŸŽฏ Advanced Features

Task Lists

Code Language Examples

JavaScript/TypeScript:

interface User {
  id: number;
  name: string;
  email?: string;
}

const users: User[] = [
  { id: 1, name: "Alice", email: "alice@example.com" },
  { id: 2, name: "Bob" },
];

const activeUsers = users.filter((user) => user.email !== undefined);

Bash/Shell:

#!/bin/bash

# Install dependencies
npm install

# Run the md2html-action locally
npx @actions/core
pandoc --version

# Convert markdown to HTML
pandoc input.md -o output.html --template=template.html

YAML Configuration:

name: Convert Markdown to HTML
on:
  push:
    paths: ["docs/**/*.md"]

jobs:
  convert:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: CameronBrooks11/md2html-action@main
        with:
          source-dir: "docs"
          output-dir: "html"
          stylesheet: "technical"

๐Ÿš€ Performance & Compatibility

Aspect Details
Build Time โšก Fast conversion using optimized Pandoc
File Size ๐Ÿ“ฆ Minimal CSS/JS footprint
Browser Support ๐ŸŒ Modern browsers (Chrome 88+, Firefox 85+, Safari 14+)
Mobile Support ๐Ÿ“ฑ Fully responsive on all devices
Accessibility โ™ฟ WCAG 2.1 AA compliant
SEO Friendly ๐Ÿ” Semantic HTML with proper meta tags

๐ŸŽ‰ Conclusion

If you can see this page properly formatted with:

Then the md2html-action is working perfectly! ๐ŸŽŠ

Ready to get started? Check out the Getting Started guide or dive into Advanced Configuration for power-user features.