Blog Feature Showcase

๐Ÿ“– 6 min read By Md Afridi Sk
Markdown Tutorial Showcase

Blog Feature Showcase

This blog post demonstrates all the features supported in this portfolio blog system. From basic formatting to advanced features like syntax-highlighted code, mermaid diagrams, tables, and embedded media.

๐ŸŽจ Text Formatting

Basic Formatting

Bold text using double asterisks or double underscores

Italic text using single asterisks or single underscores

Bold and italic using triple asterisks

Strikethrough text using double tildes

Inline Elements

Use inline code for technical terms or commands like npm install

Hereโ€™s a link to GitHub and hereโ€™s an internal link

Paragraphs and Line Breaks

This is a paragraph with some text. It continues on the same line until you add a blank line.

This is a new paragraph. Notice the spacing between paragraphs creates nice visual separation for better readability.

๐Ÿ“ Headings Hierarchy

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

๐Ÿ’ฌ Blockquotes

โ€œThe best way to predict the future is to invent it.โ€ โ€” Alan Kay

Blockquotes can contain other markdown elements

  • Including lists
  • And code
  • Even italic text
const wisdom = "Code is poetry";

const wisdom = "Code is poetry";

Nested Blockquotes

This is the first level of quoting.

This is nested blockquote.

You can nest them even deeper!

๐Ÿ“‹ Lists

Unordered Lists

  • First item
  • Second item
  • Third item
    • Nested item 1
    • Nested item 2
      • Deeply nested item
      • Another deeply nested item
  • Fourth item

Ordered Lists

  1. First step
  2. Second step
  3. Third step
    1. Substep A
    2. Substep B
    3. Substep C
  4. Fourth step

Mixed Lists

  1. Start with a numbered item
    • Add a bulleted sub-item
    • And another
  2. Continue with numbers
    • More bullets
      • Even deeper bullets
        • Going deeper
  3. Final numbered item

Task Lists

  • [x] Completed task
  • [x] Another completed task
  • [ ] Pending task
  • [ ] Another pending task
    • [x] Subtask completed
    • [ ] Subtask pending

๐Ÿ’ป Code Blocks

Inline Code

Use backticks for inline code: const variable = "value"

Install packages with: npm install package-name

JavaScript Code Block

// Function to calculate fibonacci numbers
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

// Using modern JavaScript features
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);

console.log(doubled); // [2, 4, 6, 8, 10]

// Function to calculate fibonacci numbers
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

// Using modern JavaScript features
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);

console.log(doubled); // [2, 4, 6, 8, 10]

TypeScript Code Block

interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
}

class UserManager {
  private users: User[] = [];

  addUser(user: User): void {
    this.users.push(user);
  }

  getActiveUsers(): User[] {
    return this.users.filter(user => user.isActive);
  }
}

const manager = new UserManager();

interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
}

class UserManager {
  private users: User[] = [];

  addUser(user: User): void {
    this.users.push(user);
  }

  getActiveUsers(): User[] {
    return this.users.filter(user => user.isActive);
  }
}

const manager = new UserManager();

Python Code Block

# Python example with syntax highlighting
def quicksort(arr):
    if len(arr) <= 1:
        return arr
    pivot = arr[len(arr) // 2]
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]
    return quicksort(left) + middle + quicksort(right)

# Using list comprehensions
numbers = [3, 6, 8, 10, 1, 2, 1]
sorted_numbers = quicksort(numbers)
print(sorted_numbers)

# Python example with syntax highlighting
def quicksort(arr):
    if len(arr) <= 1:
        return arr
    pivot = arr[len(arr) // 2]
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]
    return quicksort(left) + middle + quicksort(right)

# Using list comprehensions
numbers = [3, 6, 8, 10, 1, 2, 1]
sorted_numbers = quicksort(numbers)
print(sorted_numbers)

CSS Code Block

/* Modern CSS with custom properties */
:root {
  --primary-color: #019b59;
  --secondary-color: #0f172a;
  --accent-gradient: linear-gradient(135deg, #019b59, #00d97e);
}

.card {
  background: var(--secondary-color);
  border-radius: 12px;
  padding: 2rem;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(1, 155, 89, 0.15);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 48px rgba(1, 155, 89, 0.25);
}

/* Modern CSS with custom properties */
:root {
  --primary-color: #019b59;
  --secondary-color: #0f172a;
  --accent-gradient: linear-gradient(135deg, #019b59, #00d97e);
}

.card {
  background: var(--secondary-color);
  border-radius: 12px;
  padding: 2rem;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(1, 155, 89, 0.15);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 48px rgba(1, 155, 89, 0.25);
}

HTML Code Block

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample Page</title>
</head>
<body>
  <header>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Welcome to my site!</h1>
    <p>This is a sample HTML document.</p>
  </main>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample Page</title>
</head>
<body>
  <header>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Welcome to my site!</h1>
    <p>This is a sample HTML document.</p>
  </main>
</body>
</html>

Bash/Shell Commands

# Navigate to project directory
cd /path/to/project

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Deploy to production
npm run deploy

# Navigate to project directory
cd /path/to/project

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Deploy to production
npm run deploy

JSON Example

{
  "name": "my-portfolio",
  "version": "1.0.0",
  "description": "Modern portfolio with blog",
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  },
  "dependencies": {
    "astro": "^4.3.2",
    "markdown-it": "^14.1.0"
  }
}

{
  "name": "my-portfolio",
  "version": "1.0.0",
  "description": "Modern portfolio with blog",
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  },
  "dependencies": {
    "astro": "^4.3.2",
    "markdown-it": "^14.1.0"
  }
}

๐Ÿ“Š Mermaid Diagrams

This blog supports Mermaid diagrams for creating beautiful flowcharts, sequence diagrams, and more!

Flowchart

graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> E[Fix the bug]
    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 Data
    Server-->>Browser: HTTP Response
    Browser-->>User: Display Page

Git Graph

gitGraph
    commit id: "Initial commit"
    commit id: "Add homepage"
    branch develop
    checkout develop
    commit id: "Add blog feature"
    commit id: "Fix styling"
    checkout main
    merge develop
    commit id: "Release v1.0"

Class Diagram

classDiagram
    class User {
        +String name
        +String email
        +login()
        +logout()
    }
    class BlogPost {
        +String title
        +String content
        +Date publishDate
        +publish()
        +delete()
    }
    class Comment {
        +String text
        +Date createdAt
        +approve()
    }

    User "1" --> "*" BlogPost : writes
    BlogPost "1" --> "*" Comment : has

State Diagram

stateDiagram-v2
    [*] --> Draft
    Draft --> Review : Submit
    Review --> Published : Approve
    Review --> Draft : Request Changes
    Published --> Archived : Archive
    Archived --> [*]

Pie Chart

pie title Programming Languages Usage
    "JavaScript" : 45
    "TypeScript" : 30
    "Python" : 15
    "CSS" : 10

๐Ÿ“‹ Tables

Simple Table

Feature Status Priority
Dark Mode โœ… Completed High
Blog System โœ… Completed High
Comments โœ… Completed Medium
Analytics ๐Ÿšง In Progress Low

Aligned Columns

Left Aligned Center Aligned Right Aligned
Text Text Text
More text More text More text
Even more Even more Even more

Complex Table with Formatting

Language Use Case Difficulty Popularity
JavaScript Web Development โญโญ ๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ
Python Data Science โญ ๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ
Rust Systems Programming โญโญโญโญ ๐Ÿ”ฅ๐Ÿ”ฅ
TypeScript Type-safe JS โญโญ ๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ

Visit my GitHub to see my projects.

Check out Astro documentation for more info.

I love Astro and Markdown!

Jump to Tables section or Code Blocks

๐Ÿ–ผ๏ธ Images

Standard Image

Portfolio Screenshot

๐ŸŽฅ Embedded Media

YouTube Video Embed

You can embed YouTube videos using HTML:

GIF Images

Animated GIF Example

Video Element (MP4)

๐ŸŽฏ HTML Elements

Custom Styled Div

Custom Styled Section

You can use HTML directly in markdown for custom styling and layouts!

Colored Text

This text is colored with the accent color!

And this text is red and italic!

Highlight Box

๐Ÿ’ก Pro Tip: You can combine markdown and HTML for maximum flexibility!

โš ๏ธ Special Sections

Warning Box

โš ๏ธ Warning: Make sure to test your code before deploying to production!

Error Box

โŒ Error: This is what an error message might look like.

Success Box

โœ… Success: Your deployment was successful!

๐Ÿ“ Mathematical Expressions

While native LaTeX isnโ€™t supported, you can use Unicode symbols:

  • Area of circle: A = ฯ€rยฒ
  • Pythagorean theorem: aยฒ + bยฒ = cยฒ
  • Summation: ฮฃ(n) from i=1 to n
  • Infinity: โˆž
  • Delta: ฮ”x
  • Integral: โˆซf(x)dx

๐ŸŽจ Horizontal Rules

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

๐Ÿ”ค Special Characters & Emojis

Emojis Work Great! ๐ŸŽ‰

โœจ Sparkles โญ Star ๐Ÿš€ Rocket ๐Ÿ’ก Idea ๐ŸŽฏ Target ๐Ÿ”ฅ Fire

โค๏ธ Heart ๐Ÿ‘ Thumbs Up ๐ŸŽจ Art ๐Ÿ“ฑ Mobile ๐Ÿ’ป Laptop ๐ŸŒŸ Glowing Star

Special Characters

Copyright ยฉ | Registered ยฎ | Trademark โ„ข | En Dash โ€“ | Em Dash โ€”

Arrows: โ† โ†’ โ†‘ โ†“ | Quotes: " " โ€™ โ€™ | Ellipsis: โ€ฆ

๐Ÿ“ฆ Code with Line Numbers (Simulated)

1  | // Binary search implementation
2  | function binarySearch(arr, target) {
3  |   let left = 0;
4  |   let right = arr.length - 1;
5  |   
6  |   while (left <= right) {
7  |     const mid = Math.floor((left + right) / 2);
8  |     
9  |     if (arr[mid] === target) {
10 |       return mid;
11 |     } else if (arr[mid] < target) {
12 |       left = mid + 1;
13 |     } else {
14 |       right = mid - 1;
15 |     }
16 |   }
17 |   
18 |   return -1;
19 | }

1  | // Binary search implementation
2  | function binarySearch(arr, target) {
3  |   let left = 0;
4  |   let right = arr.length - 1;
5  |   
6  |   while (left <= right) {
7  |     const mid = Math.floor((left + right) / 2);
8  |     
9  |     if (arr[mid] === target) {
10 |       return mid;
11 |     } else if (arr[mid] < target) {
12 |       left = mid + 1;
13 |     } else {
14 |       right = mid - 1;
15 |     }
16 |   }
17 |   
18 |   return -1;
19 | }

๐ŸŽญ Definition Lists (Using HTML)

HTML
HyperText Markup Language - The standard markup language for web pages.
CSS
Cascading Style Sheets - Used for styling HTML elements.
JavaScript
A programming language that enables interactive web pages.

๐ŸŽช Keyboard Shortcuts

Press Ctrl + C to copy

Press Cmd + V to paste

Press Ctrl + Alt + Delete for task manager

๐Ÿ Conclusion

This blog post demonstrates all the rich features available in this portfolio blog system, including:

โœ… Text Formatting - Bold, italic, strikethrough, inline code โœ… Headings - All 6 levels with proper hierarchy โœ… Blockquotes - Including nested and styled quotes โœ… Lists - Ordered, unordered, nested, and task lists โœ… Code Blocks - Syntax highlighted in multiple languages โœ… Mermaid Diagrams - Flowcharts, sequence diagrams, git graphs, and more โœ… Tables - With alignment and formatting โœ… Links - External, internal, and reference-style โœ… Images - With captions and titles โœ… Videos & GIFs - Embedded media support โœ… HTML - Custom styling and layouts โœ… Special Characters - Emojis and symbols โœ… Horizontal Rules - Section separators

Happy blogging! ๐ŸŽ‰

Comments