Back to blog list

Blog System Formatting Guide

Published on: August 23, 2025

2 min read

Markdown formatting demonstration
markdown formatting guide mdx examples

Markdown Formatting Reference

A showcase of all available formatting features in this blog system.

Text & Headers

Bold, italic, both, strikethrough, inline code, links

Custom Badge

Headers 1-6

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Lists

  • Unordered item
    • Nested item
  • Completed task
  • Incomplete task
  1. Ordered item
    1. Nested ordered
  2. Another item

Alerts & Quotes

Standard blockquote with formatting

Code Examples

Basic Usage

inline code, plain blocks, and syntax highlighting:

example.js
const config = {
apiUrl: 'https://api.example.com',
timeout: 5000,
retries: 3
};
Terminal
npm install && npm run dev
git add . && git commit -m "update"
src/
├── components/
├── features/
└── pages/

Tables

LanguageUse CaseRating
JavaScriptWeb Dev⭐⭐⭐⭐⭐
PythonAI/Data⭐⭐⭐⭐⭐
RustSystems⭐⭐⭐

Images

Standard Image

Optimized Astro image

Interactive Components

This is a live React component with full interactivity:

Advanced Features

Mathematical expressions: E = mc², a² + b² = c²

🌈 Custom HTML

Tailwind + HTML mixed with markdown

Special characters: 😀 🎉 🚀 💻 ⚡ 🔥
Keyboard shortcuts: Ctrl + C


Quick Reference

Text: **bold**, *italic*, `code`, [links](url)
Code: Syntax highlighting, line numbers, diffs, titles
Components: React/Astro integration, cards, alerts
Media: Optimized images, responsive design
HTML: Custom styling with Tailwind CSS

Complete formatting reference for this blog system.