Markdown Extended: Advanced Syntax Features

Beyond the basics, Markdown supports a rich set of extended features. This article demonstrates math typesetting, code blocks with advanced highlighting, GitHub-style alerts, and more.

Math Formulas

Inline Math

Use single dollar signs for inline math. For example, Einstein’s famous equation $E = mc^2$ changed physics forever. The quadratic formula $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$ solves any quadratic equation. Euler’s identity $e^{i\pi} + 1 = 0$ is often called the most beautiful equation in mathematics.

Block Math

Use double dollar signs for display-mode math:

The Gaussian integral:

Maxwell’s equations in differential form:

The Schrödinger equation:

KaTeX Examples

Matrices

A 3×3 identity matrix:

Matrix multiplication:

Integrals

Definite integral:

Double integral:

Contour integral:

Summations

Finite sum:

Infinite series (Basel problem):

Taylor series expansion of $e^x$:

Fractions and Binomials

Continued fraction:

Binomial coefficient:

Binomial theorem:

Limits and Products

Limit definition of $e$:

Wallis product:

Code Blocks with Syntax Highlighting

JavaScript / TypeScript

async function fetchPosts(tag) {
  const response = await fetch(`/api/posts?tag=${encodeURIComponent(tag)}`);
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  const posts = await response.json();
  return posts.filter(post => !post.draft).sort((a, b) =>
    new Date(b.pubDatetime) - new Date(a.pubDatetime)
  );
}

interface BlogPost {
  title: string;
  slug: string;
  pubDatetime: Date;
  modDatetime?: Date;
  author: string;
  description: string;
  tags: string[];
  category: string;
  draft: boolean;
  featured?: boolean;
}

function getPostsByTag(posts: BlogPost[], tag: string): BlogPost[] {
  return posts
    .filter(post => post.tags.includes(tag) && !post.draft)
    .sort((a, b) => b.pubDatetime.getTime() - a.pubDatetime.getTime());
}

Python

from dataclasses import dataclass
from datetime import datetime
from typing import Optional

@dataclass
class BlogPost:
    title: str
    slug: str
    pub_datetime: datetime
    author: str
    description: str
    tags: list[str]
    category: str
    draft: bool = False
    featured: bool = False
    mod_datetime: Optional[datetime] = None

    @property
    def reading_time(self) -> int:
        word_count = len(self.content.split())
        return max(1, word_count // 200)

    def matches_tag(self, tag: str) -> bool:
        return tag.lower() in [t.lower() for t in self.tags]

Rust

use serde::{Deserialize, Serialize};
use chrono::{DateTime, Utc};

#[derive(Debug, Serialize, Deserialize)]
struct BlogPost {
    title: String,
    slug: String,
    pub_datetime: DateTime<Utc>,
    author: String,
    description: String,
    tags: Vec<String>,
    category: String,
    #[serde(default)]
    draft: bool,
}

impl BlogPost {
    fn reading_time(&self, content: &str) -> usize {
        let word_count = content.split_whitespace().count();
        std::cmp::max(1, word_count / 200)
    }

    fn has_tag(&self, tag: &str) -> bool {
        self.tags.iter().any(|t| t.eq_ignore_ascii_case(tag))
    }
}

CSS

.prose {
  --tw-prose-body: theme('colors.gray.700');
  --tw-prose-headings: theme('colors.gray.900');
  --tw-prose-links: theme('colors.blue.600');

  max-width: 65ch;
  font-size: 1.125rem;
  line-height: 1.75;
}

@media (prefers-color-scheme: dark) {
  .prose {
    --tw-prose-body: theme('colors.gray.300');
    --tw-prose-headings: theme('colors.gray.100');
    --tw-prose-links: theme('colors.blue.400');
  }
}

.prose code::before,
.prose code::after {
  content: none;
}

.prose pre {
  border-radius: 0.5rem;
  padding: 1.25rem;
  overflow-x: auto;
  tab-size: 2;
}

Code Block Advanced Features

Line Highlighting

Highlight specific lines to draw attention (using {1,3-5} syntax — support depends on your Markdown processor):

const config = {
  site: 'https://example.com',
  base: '/',
  integrations: [
    tailwind(),
    sitemap(),
  ],
};

Diff Notation

Show code changes with diff syntax:

- const greeting = "Hello, World!";
+ const greeting = "Hello, Astro!";

  function main() {
-   console.log(greeting);
+   console.log(`${greeting} 🚀`);
+   console.log("Welcome to the blog!");
  }

Shell / Terminal Commands

# Create a new Astro project
npm create astro@latest my-blog

# Navigate to project directory
cd my-blog

# Install dependencies
pnpm install

# Start the development server
pnpm run dev

# Build for production
pnpm run build

JSON Configuration

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "jsx": "react-jsx",
    "jsxImportSource": "astro",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"]
    }
  }
}

GitHub Alerts

GitHub-style alerts provide visually distinct callouts for different types of information:

Alerts with Rich Content

pnpm run build --remote

- import { getCollection } from 'astro:content';
+ import { getCollection } from 'astro:content';  // same API, new data/ directory

Abbreviations

The HTML specification is maintained by the W3C.

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

Other common abbreviations in web development:

• CSS is used for styling web pages
• JS is the scripting language of the web
• API endpoints handle server communication
• SSR renders pages on the server
• SSG generates static pages at build time

*[CSS]: Cascading Style Sheets *[JS]: JavaScript *[API]: Application Programming Interface *[SSR]: Server-Side Rendering *[SSG]: Static Site Generation

Definition Lists

Astro

A modern static site generator that allows you to build faster websites with less client-side JavaScript. It supports multiple UI frameworks and uses an island architecture.

Tailwind CSS

A utility-first CSS framework that provides low-level utility classes for building custom designs without writing custom CSS.

MDX

An authoring format that lets you use JSX components within Markdown documents, combining the simplicity of Markdown with the power of component-based UI.

TypeScript

A typed superset of JavaScript that compiles to plain JavaScript. It adds optional static typing and class-based object-oriented programming.

Keyboard Shortcuts

Display keyboard shortcuts with the <kbd> element:

Common Editor Shortcuts

VS Code Power Shortcuts

Terminal Shortcuts

Navigate your terminal like a pro:

• Ctrl + C — Cancel current command
• Ctrl + L — Clear terminal
• Ctrl + R — Reverse search command history
• Ctrl + A — Move cursor to beginning of line
• Ctrl + E — Move cursor to end of line
• Tab — Auto-complete file names and commands

Wrapping Up

These extended Markdown features add significant expressive power to your writing. Math formulas bring technical precision, syntax-highlighted code blocks improve readability, and GitHub alerts create clear visual hierarchies. Combine these with the basic Markdown syntax to create polished, professional technical content.