01/01/2000, 02:58 pm HKT ×

Complete Markdown Syntax Test

A comprehensive guide showcasing all Markdown syntax features with live examples for testing and reference

By Syrup 6 min read
markdown testing

Complete Markdown Syntax Guide

This comprehensive guide demonstrates all Markdown syntax features available on this blog. Perfect for testing formatting and as a reference for future posts.

Table of Contents

Headers

Markdown supports six levels of headers using # symbols:

Header 1 (H1)

Header 2 (H2)

Header 3 (H3)

Header 4 (H4)

Header 5 (H5)
Header 6 (H6)

Text Formatting

Basic Formatting

Bold text using **bold** or __bold__

Italic text using *italic* or _italic_

Bold and italic using ***bold italic***

Strikethrough using ~~strikethrough~~

Special Characters

You can escape special characters with backslash: *not italic*

Subscript and Superscript

H2O (subscript using ~)

E=mc^2^ (superscript using ^)

Lists

Unordered Lists

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

Ordered Lists

  1. First ordered item
  2. Second ordered item
    1. Nested ordered item
    2. Another nested item
  3. Third ordered item

Task Lists

  • Completed task
  • Incomplete task
  • Another completed task
    • Nested incomplete task
    • Nested completed task

Inline link

Link with title

Reference-style link

Relative link to About page

URLs automatically become links: https://deluxesyrup.github.io/

Images

Alt text for image

Small image

Code

Inline Code

Use backticks for inline code. Here’s a variable: const name = 'Syrup'

Code Blocks

JavaScript

function greetUser(name) {
  console.log(`Hello, ${name}!`);
  return `Welcome to ${name}'s blog`;
}

const user = 'Syrup';
greetUser(user);

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Syrup's Blog</title>
</head>
<body>
  <h1>Welcome to my blog!</h1>
  <p>This is a test HTML snippet.</p>
</body>
</html>

CSS

.blog-post {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  font-family: 'Inter', sans-serif;
}

.dark-mode {
  background-color: #1a1a1a;
  color: #ff69b4;
}

Python

def fibonacci(n):
    """Generate Fibonacci sequence up to n"""
    if n <= 0:
        return []
    elif n == 1:
        return [0]
    
    sequence = [0, 1]
    while len(sequence) < n:
        sequence.append(sequence[-1] + sequence[-2])
    
    return sequence

# Generate first 10 Fibonacci numbers
result = fibonacci(10)
print(result)

Terminal/Shell

# Clone the repository
git clone https://github.com/DeluxeSyrup/deluxe-syrup.git

# Navigate to project directory
cd deluxe-syrup

# Install dependencies
npm install

# Start development server
npm run dev

Tables

Basic Table

FeatureSupportedNotes
Headers✅H1-H6 available
Bold✅Using **text**
Italic✅Using *text*
Code✅Inline and blocks
Links✅Multiple formats

Advanced Table

LanguageDifficultyLearning TimePopularityUse Cases
HTML⭐1-2 weeks⭐⭐⭐⭐⭐Web structure
CSS⭐⭐2-4 weeks⭐⭐⭐⭐⭐Web styling
JavaScript⭐⭐⭐2-6 months⭐⭐⭐⭐⭐Web interactivity
TypeScript⭐⭐⭐⭐1-3 months⭐⭐⭐⭐Type-safe JS
Python⭐⭐1-3 months⭐⭐⭐⭐⭐Backend, AI, Data

Table with Alignment

Left AlignedCenter AlignedRight Aligned
DefaultCenteredRight
TextContent123
MoreData456.78

Blockquotes

Simple Blockquote

This is a simple blockquote. It can span multiple lines and will be styled consistently across the blog.

Nested Blockquote

This is the first level of quotation.

This is a nested blockquote inside the first one.

It can contain bold, italic, and even code.

Blockquote with Attribution

“The best way out is always through.”

— Robert Frost

Complex Blockquote

Important Note: This blockquote contains multiple formatting elements:

  • Bold text for emphasis
  • Italic text for style
  • Inline code for technical terms
  • Links for references

It demonstrates how blockquotes can contain rich content while maintaining readability.

Horizontal Rules

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

Advanced Features

Definition Lists

Term 1 : Definition for term 1

Term 2 : Definition for term 2 : Another definition for term 2

Footnotes

Here’s a sentence with a footnote1. And here’s another one2.

Abbreviations

The HTML specification is maintained by the W3C.

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

Keyboard Keys

Press Ctrl + C to copy text.

Use Cmd + V on Mac to paste.

Math Expressions (not supported yet)

Inline math: $E = mc^2$

Block math: $$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $$

Emoji Support (not supported yet)

Markdown supports emoji shortcuts:

  • :smile: :smile:
  • :heart: :heart:
  • :rocket: :rocket:
  • :computer: :computer:
  • :coffee: :coffee:
  • :books: :books:

Testing Section

This section is specifically for testing various combinations:

Mixed Formatting Test

Here’s a paragraph with bold, italic, bold italic, strikethrough, and inline code all together. It also includes a link and an emoji :sparkles:.

Code in Lists

  1. Install Node.js: npm install
  2. Run the development server: 
    npm run dev
  3. Open browser to http://localhost:4321

Tables with Code

CommandDescriptionExample
git addStage changesgit add .
git commitCommit changesgit commit -m "message"
git pushPush to remotegit push origin main

Footnotes

  1. This is the first footnote. ↩

  2. This is the second footnote with more detailed information. ↩