Style Guide

This page demonstrates the various markdown elements and how they render on this site. It serves as both a reference and a test suite for typography and formatting.

Typography

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Text Emphasis

Bold text for emphasis

Italic text for subtle emphasis

Bold and italic for strong emphasis

Strikethrough text for deletions

Underlined text (if supported)

Highlighted text for marking

Inline Code

Use inline code for short code snippets like const variable = 'value'

Block Elements

Paragraphs

This is a regular paragraph. It contains multiple sentences to demonstrate how text flows and wraps. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is another paragraph after a blank line. Paragraphs should have appropriate spacing between them for readability.

Blockquotes

This is a simple blockquote. It's used for quoting text or highlighting important information.

This blockquote has multiple paragraphs. Each paragraph in a blockquote should be properly formatted and indented.

Nested blockquotes are also possible. This is a quote within a quote.

You can have multiple paragraphs in nested quotes too.

Lists

Unordered Lists

  • First item
  • Second item
    • Nested item
    • Another nested item
  • Third item
    • Even deeper nesting
      • And deeper still
  • Back to top level

Ordered Lists

  1. First item
  2. Second item
    1. Nested ordered item
    2. Another nested item
  3. Third item
    • Mixed list types
    • Unordered in ordered
  4. Fourth item

Task Lists

  • [x] Completed task
  • [ ] Incomplete task
  • [ ] Another incomplete task
  • [x] Another completed task
    • [x] Nested completed task
    • [ ] Nested incomplete task

Definition Lists (if supported)

Term 1 : Definition for term 1

Term 2 : Definition for term 2 : Second definition for term 2

Code Blocks

Fenced Code Blocks 

// JavaScript example with syntax highlighting
function greetUser(name) {
  const greeting = `Hello, ${name}!`;
  console.log(greeting);
  return greeting;
}

// Call the function
greetUser("World");
# Python example with syntax highlighting
def fibonacci(n):
    """Generate Fibonacci sequence up to n."""
    a, b = 0, 1
    while a < n:
        yield a
        a, b = b, a + b

# Print first 10 numbers
for num in fibonacci(10):
    print(num)
/* CSS example */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

@media (max-width: 768px) {
  .container {
    padding: 0.5rem;
  }
}

Inline Code with Language

Here's some inline HTML: <button class="btn">Click me</button>

And some inline CSS: color: #ff6b6b; font-weight: bold;

Link to Google

Link with title attribute

Reference link

Another reference

Link to projects page

Link to home page

Email me

Images

Inline Images

Hero doodle image

Hero doodle image

Tables

Basic Table

Header 1 Header 2 Header 3
Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6
Cell 7 Cell 8 Cell 9

Aligned Table

Left align Center align Right align
Content Content Content
Longer Short Value
Text Here 123.45

Table with Markdown

Feature Status Notes
Bold Italic Code
Link ✅ Yes ❌ No

Horizontal Rules

Three types of horizontal rules:

HTML Elements (if supported)

Accordion/Details

Click to expand

This is hidden content that appears when you click the summary.

Nested details This is nested hidden content.

Keyboard Keys

Press Ctrl + C to copy.

Press Cmd + Space for Spotlight.

Superscript and Subscript

H2O is water.

E = mc2 is Einstein's equation.

Citations

This is a statement that needs a citation.[1]

Footnotes (if supported)

Here's a statement with a footnote[1].

You can also have inline footnotes[2].

And multiple footnotes[3] in the same paragraph[4].

Advanced Markdown

Emoji

😄 ❤️ 👍 🔥 🚀

Math (if KaTeX is supported)

Inline math: E=mc2E = mc^2

Block math:

∫−∞∞e−x2dx=π\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

Mermaid Diagrams (if supported) 

graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E

Typography Samples

Abbreviations

HTML, CSS, JS, and HTTP are common web abbreviations.

Figures and Figcaptions (if supported)

Hero doodle
Fig. 1 - This is a caption for the hero doodle image.

Verse/Poetry (if supported)

Two roads diverged in a yellow wood,
And sorry I could not travel both
And be one traveler, long I stood
And looked down one as far as I could

Testing Edge Cases

Multiple blank lines above

Multiple blank lines below

Special characters

© ® ™ & < > " '

Escaping characters

*Not italic*

*Not bold*

[Not a link](not-a-link.md)

`Not code`

Color and Styling (if custom CSS)

Primary color text

Secondary color text

Success color text

Danger color text

Badge

Primary Badge

Component Testing (if using components)

Alert Boxes

Info: This is an informational alert.
Warning: This is a warning alert.
Danger: This is a danger alert.

Buttons

Last updated: 2025-09-22

  1. This is the footnote content. It can contain multiple sentences and even bold text or italic text. ↩︎

  2. Like this one, which is inline ↩︎

  3. This is the second footnote. ↩︎

  4. And this is the third footnote, which can also contain inline code if needed. ↩︎

↑ TOP