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

Alignment Examples

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:

Or using HTML for more control:

Video Support

Videos work with standard HTML5 video tags:

<video controls width="100%">
  <source src="/path/to/video.mp4" type="video/mp4">
  Your browser doesn't support video.
</video>

Blockquotes

Note: This is a standard blockquote.

It can contain multiple paragraphs and formatting.

Warning: Be careful with this operation!

Nested blockquotes:

This is the first level

This is nested

This is deeply nested

Links

Here are various types of links:

• Standard link: Visit my website
• Reference-style link: GitHub
• Autolink: https://github.com
• Email: email@example.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
• _Subscript
• ^Superscript

Horizontal Rules

You can create horizontal rules with three or more hyphens, asterisks, or underscores:

Inline Code and Math

Use backticks for inline code within sentences.

You can also reference variables like const or let directly.

For mathematical expressions, you can use inline math like this: $E = mc^2$ (requires additional plugin).

Emojis

GitHub supports emojis! :tada: :rocket: :fire: :star: :heart:

• :white_check_mark: Completed
• :x: Failed
• :warning: Warning
• :bulb: Tip
• :hammer_and_wrench: Tool

Footnotes

Here's a sentence with a footnote[^1].

You can also use named footnotes[^note].

[^1]: This is the first footnote.
[^note]: This is a named footnote with more detailed information.

Advanced Features

Definition Lists

Markdown

A lightweight markup language

GitHub Flavored Markdown

GitHub's version with additional features

Details/Summary (Collapsible Sections)

console.log('Hidden code block!');

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.

Special Characters

You can escape special characters:

* Not italic *
` Not code `
# Not a heading

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! 🚀