Blog Post

arrow_back Back to All Articles
Documentation

Markdown Features Showcase

Welcome to the complete Markdown features showcase! This post demonstrates all the advanced Markdown capabilities supported by this blog. šŸš€

Table of Contents

This blog supports Obsidian-level Markdown features, making it perfect for technical writing, documentation, and knowledge sharing.

Callouts / Admonitions

Callouts help highlight important information with visual distinction.

[!NOTE]
This is a note callout. Use it for additional context or helpful information that readers should be aware of.

[!TIP]
This is a tip callout. Share best practices, shortcuts, or helpful suggestions here.

[!IMPORTANT]
This is an important callout. Highlight critical information that readers must understand.

[!WARNING]
This is a warning callout. Alert readers about potential issues or things to watch out for.

[!CAUTION]
This is a caution callout. Warn about dangerous operations or actions that could cause problems.

Task Lists

Track your progress with interactive checkboxes:

  • Install required dependencies
  • Configure build system
  • Add Markdown extensions
  • Write comprehensive documentation
  • Deploy to production
  • Test all features
  • Gather user feedback

Math Equations

Inline Math

The quadratic formula is and Euler's identity is .

Block Math

The Gaussian distribution:

The Fourier Transform:

Mermaid Diagrams

Flowchart

graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> E[Fix Issues]
    E --> B
    C --> F[Deploy]
    F --> G[End]

Sequence Diagram

sequenceDiagram
    participant User
    participant Browser
    participant Server
    participant Database
    
    User->>Browser: Enter URL
    Browser->>Server: HTTP Request
    Server->>Database: Query Data
    Database-->>Server: Return Results
    Server-->>Browser: HTTP Response
    Browser-->>User: Display Page

Gantt Chart

gantt
    title Project Timeline
    dateFormat  YYYY-MM-DD
    section Planning
    Requirements Analysis    :a1, 2024-01-01, 7d
    Design Phase            :a2, after a1, 10d
    section Development
    Backend Development     :b1, after a2, 14d
    Frontend Development    :b2, after a2, 14d
    section Testing
    Integration Testing     :c1, after b1, 5d
    User Acceptance Testing :c2, after c1, 3d

Code Blocks with Syntax Highlighting

JavaScript

// Advanced async/await pattern
async function fetchUserData(userId) {
    try {
        const response = await fetch(`/api/users/${userId}`);
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Error fetching user:', error);
        throw error;
    }
}

Python

# Data processing with pandas
import pandas as pd
import numpy as np

def analyze_data(df):
    """Perform statistical analysis on dataframe"""
    summary = df.describe()
    correlations = df.corr()
    
    return {
        'summary': summary,
        'correlations': correlations,
        'missing_values': df.isnull().sum()
    }

YAML

# Kubernetes deployment configuration
apiVersion: apps/v1
kind: Deployment
metadata:
  name: web-app
  labels:
    app: web
spec:
  replicas: 3
  selector:
    matchLabels:
      app: web
  template:
    metadata:
      labels:
        app: web
    spec:
      containers:
      - name: nginx
        image: nginx:1.21
        ports:
        - containerPort: 80

Tables

Feature Comparison

Feature Basic Markdown GFM Obsidian This Blog
Headings āœ… āœ… āœ… āœ…
Lists āœ… āœ… āœ… āœ…
Code Blocks āœ… āœ… āœ… āœ…
Tables āŒ āœ… āœ… āœ…
Task Lists āŒ āœ… āœ… āœ…
Footnotes āŒ āŒ āœ… āœ…
Math āŒ āŒ āœ… āœ…
Diagrams āŒ āŒ āœ… āœ…
Callouts āŒ āŒ āœ… āœ…

Performance Metrics

Metric Before After Improvement
Build Time 45s 12s 73% faster
Bundle Size 2.3 MB 890 KB 61% smaller
Lighthouse Score 72 98 +26 points
Time to Interactive 3.8s 1.2s 68% faster

Footnotes

Footnotes are perfect for adding references or additional context1. You can reference the same footnote multiple times1 or create new ones2.

Here's a sentence with a footnote that has a longer explanation3.

Text Formatting

Basic Formatting

This is bold text and this is italic text. You can also use bold and italic together.

Use strikethrough for deleted content and ==highlighted text== for emphasis.

Subscript and Superscript

Chemical formula: H2O

Mathematical notation: E = mc^2^

Inline Code

Use const for constants and let for variables in JavaScript. The kubectl apply -f command deploys resources to Kubernetes.

Blockquotes

"The best way to predict the future is to invent it."
— Alan Kay

This is a multi-line blockquote.
It can span several lines and maintain
consistent formatting throughout.

Lists

Ordered Lists

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

Unordered Lists

  • Main point one
  • Main point two
    • Sub-point 2.1
    • Sub-point 2.2
      • Deep nested point
  • Main point three

Mixed Lists

  1. Start with ordered
    • Mix in unordered
    • Another unordered item
  2. Back to ordered
    1. Nested ordered
    2. Another nested

Emoji Support

Express yourself with emoji! 😊 ā¤ļø šŸš€

Common tech emoji:

  • šŸ’» Development
  • ā˜ļø Cloud Computing
  • šŸ”’ Security
  • šŸ“Š Analytics
  • šŸ”„ Performance
  • šŸ’” Ideas
  • āš™ļø Configuration
  • šŸ† Achievements

Horizontal Rules

Use horizontal rules to separate sections:


Visit my GitHub profile or check out the documentation.

Images

Sample Image

Definition Lists

Term 1
: Definition for term 1

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

API
: Application Programming Interface

REST
: Representational State Transfer

Advanced Features

Nested Blockquotes

This is a blockquote

This is a nested blockquote

And this is even more nested

Complex Task Lists with Nested Items

  • Phase 1: Planning
    • Define requirements
    • Create mockups
    • Get stakeholder approval
  • Phase 2: Development
    • Set up environment
    • Implement features
    • Code review
  • Phase 3: Testing
    • Unit tests
    • Integration tests
    • User acceptance testing

Conclusion

This showcase demonstrates the full power of Obsidian-level Markdown support in this blog. Whether you're writing technical documentation, tutorials, or blog posts, you have access to:

āœ… Rich callouts and admonitions
āœ… Mathematical equations with KaTeX
āœ… Interactive diagrams with Mermaid
āœ… Task lists for tracking progress
āœ… Comprehensive tables
āœ… Footnotes for references
āœ… Emoji support
āœ… And much more!

Happy writing! šŸš€ ⭐

Footnotes

  1. This is a footnote with a simple explanation. ↩ ↩2

  2. Footnotes can contain more complex information and even links. ↩

  3. This footnote demonstrates that you can include formatted text, code snippets, and other Markdown elements within footnotes for richer documentation. ↩