Markdown Styling Reference

Overview

This page demonstrates every markdown element supported by Pathfinder. Use it as a visual reference for how different elements render in both light and dark modes.

Headings

Markdown headings are rendered with consistent sizing and spacing:

## Heading Level 2
### Heading Level 3
#### Heading Level 4
##### Heading Level 5
###### Heading Level 6

Each heading automatically generates an anchor ID based on its text, which can be used for direct linking.

Inline Text Formatting

Emphasis

• Italic text is created with single asterisks: *italic*
• Bold text is created with double asterisks: **bold**
• Bold italic text uses triple asterisks: ***bold italic***
• Strikethrough text uses double tildes: ~~strikethrough~~

Inline Code

Use backticks for inline code. This is useful for referencing variable names, file paths, or short commands within a sentence.

For example: Run npm install to install dependencies, then check the package.json file.

Links

• Internal link to another page
• External link to Astro docs
• Link with title

Lists

Unordered Lists

• First item
• Second item
  • Nested item A
  • Nested item B
    • Deeply nested item
• Third item

Ordered Lists

1. First step
2. Second step
   1. Sub-step A
   2. Sub-step B
3. Third step

Task Lists

• Completed task
• Another completed task
• Pending task
• Future task

Blockquotes

This is a simple blockquote. It is useful for highlighting a quote or important statement from another source.

Nested blockquotes are also supported:

This is the outer quote.

This is a nested quote within the outer quote.

Back to the outer quote.

Code Blocks

Basic Code Block

function greet(name) {
  return `Hello, ${name}! Welcome to Pathfinder.`;
}

const message = greet("Developer");
console.log(message);

Code Block with Line Highlighting

interface DocPage {
  title: string;
  description?: string;
  sidebar: {
    label: string;
    order: number;
  };
  draft: boolean;
}

const page: DocPage = {
  title: "My Page",
  sidebar: {
    label: "My Page",
    order: 1,
  },
  draft: false,
};

Code Block with Filename

npm create astro@latest
cd my-project
npm install
npm run dev

Multi-Language Code Examples

# Python example
def calculate_total(items):
    """Calculate the total price of all items."""
    return sum(item.price * item.quantity for item in items)

total = calculate_total(cart_items)
print(f"Total: ${total:.2f}")

{
  "name": "pathfinder-docs",
  "version": "1.0.0",
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  }
}

Tables

Basic Table

Alignment

Horizontal Rules

Content above the horizontal rule.

Content below the horizontal rule.

Images

Images are rendered responsively and support alt text:

![Description of the image](/path/to/image.png)

Keyboard Shortcuts

Reference keyboard shortcuts using the <kbd> element:

Press Ctrl + C to copy selected text.

Use Ctrl + Shift + P to open the command palette.

Abbreviations and Definitions

Use HTML definition lists for glossary-style content:

MDX

Markdown with JSX support, allowing you to use React/Astro components within Markdown files.

SSG

Static Site Generation — the process of generating HTML pages at build time rather than at request time.

HMR

Hot Module Replacement — a development feature that updates the browser without a full page reload.

Footnotes

Pathfinder supports markdown footnotes for adding references and citations:

This statement needs a citation[^1].

[^1]: Source: Documentation Best Practices, 2024.

Combining Elements

Here is an example of how different elements work together in realistic documentation:

Configuring the Build Pipeline

The build pipeline compiles your MDX content into static HTML. You can customize the build behavior by modifying astro.config.mjs.

Note: Changes to the Astro configuration require a server restart.

To enable source maps for debugging:

1. Open astro.config.mjs
2. Add the vite.build.sourcemap option:

// astro.config.mjs
export default defineConfig({
  vite: {
    build: {
      sourcemap: true,
    },
  },
});

3. Restart the development server with npm run dev

The following table summarizes the available build options:

For more information, see the Astro Build Configuration documentation.