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 PageGantt 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, 3dCode 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: 80Tables
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
- First item
- Second item
- Nested item 2.1
- Nested item 2.2
- 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
- Start with ordered
- Mix in unordered
- Another unordered item
- Back to ordered
- Nested ordered
- 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:
Links and Images
Links
Visit my GitHub profile or check out the documentation.
Images
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! š ā