Markdown Elements Test Page

H1 Heading - Architecture Overview

This is a paragraph after an H1 heading. It should have proper spacing from the heading above.

H2 Heading - Architecture Overview

This is a paragraph after an H2 heading. It should have proper spacing from the heading above.

H3 Heading - Architecture Overview

This is a paragraph after an H3 heading. It should have proper spacing from the heading above.

H4 Heading - Implementation Details

This is a paragraph after an H4 heading. The spacing should be consistent and visually balanced.

H5 Heading (if supported)

This tests H5 heading styling.

H6 Heading (if supported)

This tests H6 heading styling.

Basic Paragraph Spacing

This is the first paragraph in a series. It should have proper bottom margin to separate it from the next paragraph. The line height should make it easy to read.

This is the second paragraph. There should be consistent spacing between this and the previous paragraph. The text color should be appropriate for readability.

This is the third paragraph with bold text, italic text, and bold italic text. It also includes inline code to test mixed formatting.

Text Emphasis

• Bold text should be semibold and darker
• Italic text should be properly slanted
• Bold and italic should combine both styles
• Inline code should have a background and monospace font
• Links should be underlined and have hover effects

Special Characters and Entities

Testing special characters: & < > ” ’ — – … © ® ™

Unordered Lists

This is a paragraph before an unordered list. It should have proper spacing.

• First level item one
• First level item two with more text to test wrapping behavior when the content extends beyond a single line
• First level item three
  • Second level nested item
  • Another second level item
    • Third level nested item
    • Another third level item
• Back to first level

Ordered Lists

This is a paragraph before an ordered list.

1. First ordered item
2. Second ordered item with longer text to test how numbered lists handle wrapping when content extends beyond one line
3. Third ordered item
   1. Nested ordered item
   2. Another nested item
      1. Third level nested
      2. Another third level
4. Back to first level

Mixed Lists

1. Ordered item one
   • Unordered nested item
   • Another unordered nested item
2. Ordered item two
   • Mixed nesting
     1. Ordered within unordered
     2. Another ordered item

List with Inline Formatting

• Bold list item with regular text
• Italic list item with regular text
• List item with inline code
• List item with a link

Inline Code

This paragraph contains inline code that should be styled differently from regular text. Multiple inline codes: variable, function(), className.

JavaScript Code Block

// JavaScript example with syntax highlighting
class AgentSetup {
    constructor(apiKey) {
        this.apiKey = apiKey;
        this.llm = new ChatOpenAI({ temperature: 0, model: "gpt-4" });
        this.memory = new ConversationBufferMemory();
        this.tools = [];
    }
    
    addTool(name, description, function) {
        const tool = new Tool({
            name: name,
            description: description,
            func: function
        });
        this.tools.push(tool);
    }
    
    async createAgent() {
        return new AgentExecutor({
            agent: this.agent,
            tools: this.tools,
            memory: this.memory,
            verbose: true
        });
    }
}

Python Code Block

# Python example with syntax highlighting
class BiasDetector:
    def __init__(self, protected_attributes):
        self.protected_attributes = protected_attributes
        self.historical_decisions = []
    
    def analyze_decisions(self, decisions, outcomes):
        """Analyze decisions for potential bias"""
        bias_report = {}
        
        for attribute in self.protected_attributes:
            groups = self.group_by_attribute(decisions, attribute)
            
            # Calculate outcome rates for each group
            group_rates = {}
            for group, group_decisions in groups.items():
                positive_outcomes = sum(1 for d in group_decisions if outcomes[d.id] == 'positive')
                group_rates[group] = positive_outcomes / len(group_decisions)
            
            bias_report[attribute] = self.statistical_parity_test(group_rates)
        
        return bias_report

Markdown Code Block

## Markdown Example

This is a **markdown** code block showing *formatting*.

- List item one
- List item two

[Link example](https://example.com)

JSON Code Block

{
  "name": "AI Agent Configuration",
  "version": "1.0.0",
  "settings": {
    "temperature": 0.7,
    "maxTokens": 2000,
    "model": "gpt-4"
  },
  "tools": [
    "calculator",
    "search",
    "database"
  ]
}

Basic Table

Table with Formatting

Table with Long Content

Standard Image

Multiple Images

Inline Links

This paragraph contains an inline link to test link styling. Here’s another link to a section within the document.

Reference Links

This is a paragraph with a reference-style link and another reference link.

External Links

• OpenAI
• Anthropic
• LangChain
• Hugging Face

Simple Blockquote

This is a simple blockquote. It should have proper indentation and styling to distinguish it from regular paragraphs.

Multi-paragraph Blockquote

This is the first paragraph of a multi-paragraph blockquote.

This is the second paragraph. The spacing between paragraphs within the blockquote should be consistent.

This is the third paragraph with bold text and italic text to test formatting within blockquotes.

Nested Blockquote

This is the outer blockquote.

This is a nested blockquote within the outer one.

It should have additional indentation.

Back to the outer blockquote level.

Lists with Code Blocks

1. First item with explanation

   const example = "code within list";
   console.log(example);
   

2. Second item with more code

   def example_function():
       return "code in list"
   

3. Third item with inline code and bold text

Lists with Blockquotes

• First list item

  This is a blockquote within a list item
  It should maintain proper indentation

• Second list item with regular text

Blockquotes with Lists

This blockquote contains a list:

• First item in blockquote
• Second item in blockquote
• Third item in blockquote

And continues with more text after the list.

Very Long Paragraph

This is an intentionally very long paragraph to test how the typography handles extended content. It should maintain readability with proper line height, appropriate text color, and comfortable line length. The paragraph continues with more text to ensure we can see how multiple lines are rendered and whether the spacing feels natural. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Paragraph with All Formatting

This paragraph tests bold text, italic text, bold italic text, inline code, links, and combinations like bold with code and italic with links.

Empty List Items

• Item with content
• Another item with content

List with Long Items

• This is a very long list item that should wrap to multiple lines. It tests how the list styling handles longer content and whether the indentation and spacing remain consistent across line breaks. The bullet point should align properly with the first line.
• This is another long list item with similar characteristics to test consistency.