Feb 7, 2026

prjctimg 7 min read

GFM Elements Showcase - Complete Markdown Display Test

GFM Elements Showcase

This post demonstrates all the GitHub Flavored Markdown (GFM) elements and how they're displayed in this blog. Use this as a reference for formatting your posts.

Text Formatting

Bold text and italic text and bold italic text.

~~Strikethrough text~~ for corrections or deletions.

Inline code for technical terms.

Headers

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Lists

Unordered Lists

First item
Second item
- Nested item
- Another nested item
Third item

Ordered Lists

First step
Second step
1. Sub-step 2.1
2. Sub-step 2.2
Third step

Task Lists

Completed task
Incomplete task
Another pending task
- Nested completed task
- Nested incomplete task

Links and Images

Regular Links

Visit GitHub

Reference Links

Reference link 1 Reference link 2

Images

Images with Titles

Code Blocks

Syntax Highlighted Code


js
1// JavaScript example with syntax highlighting
2function fibonacci(n) {
3    if (n <= 1) return n;
4    return fibonacci(n - 1) + fibonacci(n - 2);
5}
6
7const result = fibonacci(10);
8console.log(`Fibonacci(10) = ${result}`);


py
1# Python example
2import requests
3from typing import List, Dict
4
5def fetch_data(url: str) -> Dict[str, any]:
6    """Fetch data from a REST API endpoint."""
7    try:
8        response = requests.get(url)
9        response.raise_for_status()
10        return response.json()
11    except requests.RequestException as e:
12        print(f"Error fetching data: {e}")
13        return {}
14
15# Usage example
16data = fetch_data("https://api.example.com/users")


sh
1# Shell script example
2#!/bin/bash
3
4echo "Starting deployment process..."
5
6# Check if required environment variables are set
7if [ -z "$API_KEY" ]; then
8    echo "Error: API_KEY environment variable is not set"
9    exit 1
10fi
11
12# Build and deploy
13npm run build
14docker-compose up -d
15
16echo "Deployment completed successfully!"

Diff Code Blocks


diff
--- a/src/components/Button.jsx
+++ b/src/components/Button.jsx
@@ -1,8 +1,12 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
-function Button({ text, onClick }) {
+function Button({ text, onClick, variant = 'primary' }) {
   const className = `btn ${variant}`;
   
-  return <button onClick={onClick}>{text}</button>;
+  return (
+    <button 
+      onClick={onClick} 
+      className={className}
+    >
+      {text}
+    </button>
+  );
 }
+
+Button.propTypes = {
+  text: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+  variant: PropTypes.oneOf(['primary', 'secondary', 'danger'])
+};
+
+export default Button;

Another Diff Example


diff
@@ -4,7 +4,7 @@
 const express = require('express');
 const app = express();
 
-app.listen(3000, () => {
+app.listen(process.env.PORT || 3000, () => {
   console.log('Server is running');
 });

Code Blocks with Line Numbers


html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Example Page</title>
7</head>
8<body>
9    <h1>Hello, World!</h1>
10    <p>This is a sample HTML document.</p>
11</body>
12</html>

Inline Code Examples

Use the git status command to check repository status.

The file is located at ~/projects/my-app/src/components/Button.jsx.

Tables

Basic Table

Name	Age	Occupation
John	28	Developer
Jane	32	Designer
Mike	45	Manager

Table with Alignment

Left Align	Center Align	Right Align
Content 1	Content 2	Content 3
Short	Medium	Long
A	B	C

Complex Table

Feature	Status	Priority	Assignee	Due Date
User authentication	✅ Done	High	@john	2026-01-15
Payment integration	🔄 In Progress	Critical	@jane	2026-02-01
Dashboard redesign	⏳ Pending	Medium	@mike	2026-02-15

Blockquotes

Simple Blockquote

This is a simple blockquote. It's useful for highlighting important information or quotes.

Blockquote with Formatting

Important: This is a blockquote with formatted text and inline code.

It can span multiple paragraphs and include various formatting elements.

Nested Blockquotes

This is the outer blockquote.

This is a nested blockquote.

This is a deeply nested blockquote.

Back to the outer level.

Horizontal Rules

Different Styles

Emojis

Here are some commonly used emojis in technical documentation:

Mathematical Expressions (if supported)

Inline math: $E = mc^2$

Block math: $$ \sum_{i=1}^{n} i = \frac{n(n+1)}{2} $$

Details/Summary (HTML)

<details> <summary>Click to expand technical details</summary>

This is hidden content that can be expanded by clicking the summary. It's useful for:

Technical specifications
Code explanations
Additional context
Debugging information

</details>

Embedded Media

YouTube Video

Vimeo Video

Footnotes

Here's a sentence with a footnote¹.

And another one².

Definition Lists

Term 1 : Definition 1

Term 2 : Definition 2 : Additional definition for the same term

Highlighted Text (if supported)

==This text should be highlighted==

Subscript and Superscript

H2O is the chemical formula for water.

E = mc^2^ is Einstein's famous equation.

Scientific Examples

CO2 for carbon dioxide
X10 for multiplication by 10
(x1, x2, x3) for coordinates
2^10^ for 2 to the power of 10
m^3^ for cubic meters
f'(x)^2^ for squared derivative

Mathematical Expressions

The Pythagorean theorem: a^2^ + b^2^ = c^2^

Logarithmic expression: log2(8) = 3

Chemical equation: 2H2 + O2 → 2H2O

Keyboard Keys

Press ++ctrl+c++ to copy.

Use ++alt+tab++ to switch windows.

Alerts and Callouts

🔥 Tip: Use keyboard shortcuts to improve productivity.

⚠️ Warning: Always backup your data before making changes.

❗️ Note: This feature is experimental and may change.

GitHub-Style Alerts

[!NOTE] This is a standard note alert. Use it for general information and reminders.

[!TIP] This is a tip alert. Use it for helpful suggestions and best practices.

[!WARNING] This is a warning alert. Use it for important cautions and potential issues.

[!IMPORTANT] This is an important alert. Use it for critical information that must not be missed.

[!CAUTION] This is a caution alert. Use it for potential dangers and negative consequences.

Mermaid Diagrams (if supported)

Raw HTML

You can also embed raw HTML when needed:

<div style="background: linear-gradient(45deg, #ff6b6b, #4ecdc4); color: white; padding: 20px; border-radius: 10px; text-align: center;"> <h3>Custom HTML Content</h3> <p>This is a custom-styled div using raw HTML.</p> </div>

Combined Elements

Here's a section that combines multiple elements:

💡 Pro Tip: When working with APIs, always handle errors gracefully:


js
1try {
2    const response = await fetch('/api/data');
3    const data = await response.json();
4    console.log('✅ Data loaded successfully:', data);
5} catch (error) {
6    console.error('❌ Failed to load data:', error);
7}

Remember to check the API documentation for more details.

Conclusion

This showcase demonstrates all the major GFM elements supported. Use these formatting options to create rich, engaging content that's easy to read and understand.

Happy writing! 🎉

Footnotes

This is the first footnote. ↩
This is a named footnote with more detailed information. ↩

Exploring Zig - Writing a minimal HTTP server from scratch