This post demonstrates all GitHub Flavored Markdown (GFM) features and code syntax highlighting supported by this theme.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Text Formatting

Regular text paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Bold text and also bold

Italic text and also italic

Bold and italic and also bold and italic

~~Strikethrough text~~

This is a _subscript and this is a ^superscript

Links

Inline link

Link with title

Reference-style link

Autolinked URL: https://github.com

Images

Sample Image

Lists

Unordered List

Item 1
Item 2
- Nested item 2.1
- Nested item 2.2
  - Deeply nested item
Item 3

Ordered List

First item
Second item
1. Nested item 2.1
2. Nested item 2.2
Third item

Task List

Completed task
Another completed task
Incomplete task
Another incomplete task

Blockquotes

This is a blockquote. It can span multiple lines.

Nested blockquotes:
This is nested
And even deeper

Blockquote with formatting
Can contain lists
And other elements
Even code blocks

Code

Inline Code

Use const for constants and let for variables in JavaScript.

Install the package with npm install package-name.

Code Blocks

JavaScript / TypeScript

// ES6+ JavaScript example
const greet = (name) => {
  console.log(`Hello, ${name}!`);
};

async function fetchData(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error:', error);
    throw error;
  }
}

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  introduce() {
    return `Hi, I'm ${this.name} and I'm ${this.age} years old.`;
  }
}

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

type UserRole = 'admin' | 'editor' | 'viewer';

function getUserById(id: number): Promise<User | null> {
  return fetch(`/api/users/${id}`)
    .then(res => res.json())
    .catch(() => null);
}

Python

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

@dataclass
class User:
    id: int
    name: str
    email: str
    is_active: bool = True

class UserService:
    def __init__(self, db_connection):
        self.db = db_connection

    async def get_user(self, user_id: int) -> Optional[User]:
        """Fetch a user by ID."""
        query = "SELECT * FROM users WHERE id = ?"
        result = await self.db.fetch_one(query, user_id)
        return User(**result) if result else None

    async def get_active_users(self) -> List[User]:
        """Get all active users."""
        query = "SELECT * FROM users WHERE is_active = true"
        results = await self.db.fetch_all(query)
        return [User(**row) for row in results]

# List comprehension and lambda
numbers = [1, 2, 3, 4, 5]
squared = list(map(lambda x: x ** 2, numbers))
evens = [n for n in numbers if n % 2 == 0]

Go

package main

import (
	"context"
	"encoding/json"
	"fmt"
	"net/http"
	"time"
)

type User struct {
	ID        int       `json:"id"`
	Name      string    `json:"name"`
	Email     string    `json:"email"`
	CreatedAt time.Time `json:"created_at"`
}

func (u *User) String() string {
	return fmt.Sprintf("User{ID: %d, Name: %s}", u.ID, u.Name)
}

func fetchUser(ctx context.Context, id int) (*User, error) {
	url := fmt.Sprintf("https://api.example.com/users/%d", id)

	req, err := http.NewRequestWithContext(ctx, "GET", url, nil)
	if err != nil {
		return nil, err
	}

	resp, err := http.DefaultClient.Do(req)
	if err != nil {
		return nil, err
	}
	defer resp.Body.Close()

	var user User
	if err := json.NewDecoder(resp.Body).Decode(&user); err != nil {
		return nil, err
	}

	return &user, nil
}

Rust

use std::collections::HashMap;
use std::sync::Arc;
use tokio::sync::RwLock;

#[derive(Debug, Clone)]
struct User {
    id: u64,
    name: String,
    email: String,
}

impl User {
    fn new(id: u64, name: &str, email: &str) -> Self {
        Self {
            id,
            name: name.to_string(),
            email: email.to_string(),
        }
    }
}

struct UserCache {
    cache: Arc<RwLock<HashMap<u64, User>>>,
}

impl UserCache {
    async fn get(&self, id: u64) -> Option<User> {
        let cache = self.cache.read().await;
        cache.get(&id).cloned()
    }

    async fn set(&self, user: User) {
        let mut cache = self.cache.write().await;
        cache.insert(user.id, user);
    }
}

HTML / CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample Page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="site-header">
    <nav class="nav-menu">
      <a href="/" class="nav-link">Home</a>
      <a href="/about" class="nav-link">About</a>
    </nav>
  </header>
  <main id="content">
    <article class="post">
      <h1>Welcome</h1>
      <p>Hello, World!</p>
    </article>
  </main>
</body>
</html>

:root {
  --primary-color: #0969da;
  --background-color: #ffffff;
  --text-color: #1f2328;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #0d1117;
    --text-color: #f0f6fc;
  }
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background-color: var(--background-color);
  border-bottom: 1px solid #d0d7de;
}

.nav-menu {
  display: flex;
  gap: 1rem;
}

.nav-link {
  color: var(--text-color);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.nav-link:hover {
  color: var(--primary-color);
}

Shell / Bash

#!/bin/bash

# Variables
PROJECT_NAME="my-project"
BUILD_DIR="./dist"

# Function definition
build_project() {
    echo "Building $PROJECT_NAME..."

    # Clean previous build
    rm -rf "$BUILD_DIR"
    mkdir -p "$BUILD_DIR"

    # Run build commands
    npm run build || {
        echo "Build failed!"
        exit 1
    }

    echo "Build completed successfully!"
}

# Main execution
if [[ "$1" == "--production" ]]; then
    export NODE_ENV=production
fi

build_project

# Array and loop
files=("index.html" "styles.css" "main.js")
for file in "${files[@]}"; do
    cp "src/$file" "$BUILD_DIR/"
done

JSON / YAML / TOML

{
  "name": "my-project",
  "version": "1.0.0",
  "dependencies": {
    "react": "^18.2.0",
    "typescript": "^5.0.0"
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}

# Docker Compose configuration
version: '3.8'

services:
  web:
    build: .
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
      - DATABASE_URL=${DATABASE_URL}
    depends_on:
      - db

  db:
    image: postgres:15
    volumes:
      - postgres_data:/var/lib/postgresql/data
    environment:
      POSTGRES_USER: admin
      POSTGRES_PASSWORD: secret
      POSTGRES_DB: myapp

volumes:
  postgres_data:

# Hugo configuration
baseURL = "https://example.com/"
languageCode = "en-us"
title = "My Blog"
theme = "primer-blog"

[params]
  description = "A blog about technology"
  author = "John Doe"

[menu]
  [[menu.main]]
    name = "Home"
    url = "/"
    weight = 1

SQL

-- Create users table
CREATE TABLE users (
    id SERIAL PRIMARY KEY,
    username VARCHAR(50) UNIQUE NOT NULL,
    email VARCHAR(255) UNIQUE NOT NULL,
    password_hash VARCHAR(255) NOT NULL,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

-- Create index
CREATE INDEX idx_users_email ON users(email);

-- Insert sample data
INSERT INTO users (username, email, password_hash)
VALUES
    ('john_doe', 'john@example.com', 'hashed_password_1'),
    ('jane_smith', 'jane@example.com', 'hashed_password_2');

-- Query with JOIN
SELECT
    u.username,
    u.email,
    COUNT(p.id) as post_count
FROM users u
LEFT JOIN posts p ON u.id = p.author_id
WHERE u.created_at > NOW() - INTERVAL '30 days'
GROUP BY u.id, u.username, u.email
HAVING COUNT(p.id) > 0
ORDER BY post_count DESC
LIMIT 10;

Diff

--- a/config.js
+++ b/config.js
@@ -1,7 +1,8 @@
 module.exports = {
   name: 'my-app',
-  version: '1.0.0',
+  version: '1.1.0',
   settings: {
-    debug: true
+    debug: false,
+    logging: true
   }
 };

Tables

Simple Table

Name	Age	City
Alice	28	Tokyo
Bob	32	London
Carol	25	Paris

Aligned Table

Left-aligned	Center-aligned	Right-aligned
Left	Center	Right
Text	Text	Text
More	More	More

Complex Table

Feature	Status	Notes
Markdown	:white_check_mark: Supported	Full GFM support
Syntax Highlighting	:white_check_mark: Supported	Multiple languages
Math Equations	:x: Not supported	Use images instead
Mermaid Diagrams	:x: Not supported	Planned feature

Horizontal Rules

Three different ways to create horizontal rules:

Escaping Characters

*Not italic*

`Not code`

# Not a heading

Keyboard Keys

Press Ctrl + C to copy.

Press Cmd + Shift + P to open command palette.

Abbreviations

The HTML specification is maintained by the W3C.

*[HTML]: Hyper Text Markup Language *[W3C]: World Wide Web Consortium

Footnotes

Here’s a sentence with a footnote¹.

And another one².

Details / Summary (Collapsible)

Click to expand

This content is hidden by default.

Item 1
Item 2
Item 3

console.log('Hidden code!');

Expanded by default

This section is visible by default because of the open attribute.

Alerts / Notes (GitHub Style)

[!NOTE] This is a note callout.

[!TIP] This is a tip callout.

[!IMPORTANT] This is an important callout.

[!WARNING] This is a warning callout.

[!CAUTION] This is a caution callout.

Emoji

:smile: :heart: :thumbsup: :rocket: :sparkles:

Conclusion

This page demonstrates the full range of GitHub Flavored Markdown features. If any elements don’t render correctly, please check the theme configuration and Hugo settings.

This is the first footnote. ↩︎
This is the second footnote with more content. ↩︎