GitHub-Style Markdown Demo

This is a comprehensive demonstration of GitHub Flavored Markdown with beautiful syntax highlighting powered by Shiki.

Note: I wrote this note, the rest was from AI :) as a test for this blog style

Table of Contents

• Code Blocks
• Tables
• Task Lists
• Images and Media
• Blockquotes
• Links

Code Blocks

Here’s some TypeScript code with beautiful syntax highlighting:

interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
}

async function fetchUser(id: number): Promise<User | null> {
  try {
    const response = await fetch(`/api/users/${id}`);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const user: User = await response.json();
    return user;
  } catch (error) {
    console.error('Failed to fetch user:', error);
    return null;
  }
}

// Usage
const user = await fetchUser(123);
console.log(user?.name);

Python with syntax highlighting:

def fibonacci(n: int) -> list[int]:
    """Generate Fibonacci sequence up to n terms."""
    if n <= 0:
        return []
    elif n == 1:
        return [0]

    sequence = [0, 1]
    for i in range(2, n):
        sequence.append(sequence[i-1] + sequence[i-2])

    return sequence

# Generate first 10 Fibonacci numbers
result = fibonacci(10)
print(result)  # [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

JavaScript React component:

import { useState, useEffect } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');

  const addTodo = () => {
    if (input.trim()) {
      setTodos([...todos, { id: Date.now(), text: input, done: false }]);
      setInput('');
    }
  };

  return (
    <div className="todo-container">
      <h2>My Todos</h2>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        onKeyPress={(e) => e.key === 'Enter' && addTodo()}
        placeholder="Add a new todo..."
      />
      <button onClick={addTodo}>Add</button>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            <input
              type="checkbox"
              checked={todo.done}
              onChange={() => toggleTodo(todo.id)}
            />
            <span style={{
              textDecoration: todo.done ? 'line-through' : 'none'
            }}>
              {todo.text}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}

Bash/Shell script:

#!/bin/bash

# Build and deploy script
echo "Starting build process..."

# Install dependencies
npm install

# Run tests
npm test

# Build for production
npm run build

# Deploy to server
if [ $? -eq 0 ]; then
    echo "Build successful! Deploying..."
    rsync -avz dist/ user@server:/var/www/app/
    echo "Deployment complete!"
else
    echo "Build failed. Aborting deployment."
    exit 1
fi

Tables

Task Lists

• Set up SvelteKit project
• Install markdown dependencies
• Configure Shiki for syntax highlighting
• Add GitHub-style CSS
• Build CMS functionality
• Add image optimization
• Deploy to production

Images and Media

You can add images using standard markdown syntax:

Blockquotes

Note: This is a standard blockquote.

It can contain multiple paragraphs and formatting.

Warning: Be careful with this operation!

Links

Here are various types of links:

• Standard link: Visit my website
• Autolink: https://github.com

Lists

Unordered Lists

• First item
• Second item
  • Nested item 1
  • Nested item 2
    • Deeply nested
• Third item

Ordered Lists

1. First step
2. Second step
   1. Sub-step A
   2. Sub-step B
3. Third step

Text Formatting

You can use various text formatting options:

• Bold text
• Italic text
• Bold and italic
• Strikethrough
• Inline code

Horizontal Rules

You can create horizontal rules with three or more hyphens:

Inline Code

Use backticks for inline code within sentences.

You can also reference variables like const or let directly.

Code Diffs

function hello() {
-  console.log('Old way');
+  console.log('New way');
}

Keyboard Keys

Press Ctrl + C to copy.

Use ⌘ + V to paste on Mac.

Conclusion

This markdown renderer supports:

1. GitHub Flavored Markdown - All GFM features
2. Shiki Syntax Highlighting - Same engine as VS Code
3. Beautiful Styling - Authentic GitHub look
4. Images & Videos - Full media support
5. Tables & Lists - Properly formatted
6. Code Blocks - 100+ languages supported

Perfect for technical blogs, documentation, and content-heavy websites!