MDX Rendering Test & Content Style Guide

This page exists to test every content format and rendering capability of our MDX-based blog system. Each section below contains real-world examples of content types that engineers and technical writers might use when creating blog posts.

The goal is to identify which content types render correctly, which require fixes, and whether the current markdownToSections() parser and dangerouslySetInnerHTML rendering approach handles mixed Markdown and HTML content properly.

1. Text Styling

Heading Hierarchy

This section tests multiple heading levels:

Heading 4

Heading 5

Heading 6

Inline Text Styles

The following text demonstrates standard Markdown formatting:

This is bold text using Markdown. This is italic text using Markdown. This is bold italic using Markdown. This is strikethrough text. This is inline code which should be monospace.

Here is a standard Markdown link to Halden Solutions.

Now here is HTML-based formatting:

This is HTML bold text. This is HTML italic text. This is underlined text. This is highlighted text. This is small text. This is deleted text. This contains ^superscript and _subscript.

The key question: does the renderer preserve both Markdown and HTML inline formatting in the same paragraph?

2. Colors & Highlights

Inline Colored Text

In production AI systems, red text might indicate warnings or errors. Green text indicates success or healthy status. Blue text conveys informational content. Purple text might highlight special features or advanced topics.

We can also use yellow highlighted text to draw attention to important points.

Callout Boxes

3. Lists

Unordered List

Key considerations for AI safety guardrails:

• Input filtering to reject problematic requests
• Output validation to check responses for safety
• Escalation routing to send uncertain cases to humans
• Monitoring to track guardrail triggers
• Regular audits to identify bypass attempts

Ordered List

The typical workflow for deploying an AI system:

1. Collect requirements from stakeholders
2. Design the system architecture with safety constraints
3. Implement guardrails and safety checks
4. Test the system with edge cases and adversarial inputs
5. Deploy to production with monitoring
6. Continuously review and improve guardrails

Nested Unordered List

Guardrail implementation patterns:

• Input guardrails
  • Pattern matching for jailbreak attempts
  • Token budget validation
  • Input length limits
• Output guardrails
  • Factual grounding checks
  • Toxicity detection
  • Confidence scoring
• Escalation guardrails
  • Human review for uncertain responses
  • Automatic fallback to support team
  • Policy violation alerts

Nested Ordered List

Building a production-ready voice agent:

1. Foundation layer
   1. Audio capture and preprocessing
   2. Speech-to-text conversion
   3. Intent recognition
2. Processing layer
   1. Parse customer request
   2. Query knowledge base
   3. Generate response
   4. Validate against guardrails
3. Output layer
   1. Text-to-speech conversion
   2. Audio playback
   3. Call routing if escalation needed

Task/Checklist List

Deployment readiness checklist:

• Architecture reviewed by security team
• Code reviewed by peers
• Unit tests written and passing
• Integration tests passing
• Load testing completed
• Production deployment scheduled
• Monitoring dashboard configured

4. Blockquotes

Simple Blockquote

This is a simple blockquote. Use blockquotes to emphasize important statements or quotes from industry experts.

Multi-line Blockquote

AI systems should be designed with failure modes in mind.

Reliability is not only about uptime; it is also about predictable behavior. When a system fails, it should fail gracefully and safely.

HTML Blockquote

The best guardrail is one that prevents problems before they occur, rather than reacting after the fact. However, when problems do occur, the system should make it obvious to operators what went wrong and why.

5. Horizontal Rules

Here is some content before the horizontal rule.

This is a paragraph after a Markdown horizontal rule. The rule should cleanly separate sections without creating spacing issues.

This paragraph follows an HTML <hr> tag. Both styles should render as clean visual separators.

6. Tables

Markdown Table

Complex Markdown Table

HTML Table

7. Images from Public Assets

Single Image

The following image should load from /public/assets/ai-voice-agents-for-operations/boy.png:

This image tests whether local assets from the public folder render correctly.

Image with Figure and Caption

Image as Link

Click the image below to view the full resolution version:

Multiple Images Side by Side

Input Processing Layer

Output Validation Layer

8. Local Video from Public Assets

The following video is loaded from /public/assets/ai-safety-guardrails/Construction_site_timelapse_ASMR_202606041602.mp4.

This is a real 19MB video file. The video player should render with controls, allowing the user to play, pause, and seek through the content.

The paragraph after the video should not become jumbled with the video element. This tests whether markdownToSections() correctly separates media blocks from surrounding paragraphs.

Video with Additional Attributes

This video plays on loop with autostart, but is muted and adapted for mobile playback (playsinline).

9. YouTube Embed

The following is a real YouTube embed. This video should render as an interactive iframe and should play when clicked.

This tests whether external iframe embeds (YouTube) render correctly via dangerouslySetInnerHTML.

10. External Image

The following is an external image hosted on the internet. This tests whether external image URLs survive the HTML parsing and rendering process.

This image comes from an external CDN and should render without issues.

11. Code Blocks

Inline Code

To deploy a voice agent, run npm install && npm run build && npm run deploy. The build process compiles TypeScript and packages the application for deployment.

JavaScript Code Block

function evaluateGuardrails(response) {
  const scores = {
    toxicity: checkToxicity(response),
    relevance: checkRelevance(response),
    accuracy: checkAccuracy(response)
  };

  const allPassed = Object.values(scores).every(score => score > 0.8);

  if (!allPassed) {
    console.warn("Guardrail violation detected:", scores);
    return false;
  }

  return true;
}

TypeScript Code Block

interface VoiceAgentConfig {
  name: string;
  temperature: number;
  maxTokens: number;
  systemPrompt: string;
  guardrails: GuardrailSet[];
}

const productionConfig: VoiceAgentConfig = {
  name: "Operations Voice Agent",
  temperature: 0.2,
  maxTokens: 1000,
  systemPrompt: "You are a helpful operations agent...",
  guardrails: [
    {
      type: "factual_grounding",
      threshold: 0.85
    },
    {
      type: "toxicity_filter",
      threshold: 0.1
    }
  ]
};

JSON Code Block

{
  "agent_config": {
    "name": "voice_agent_prod",
    "version": "2.1.0",
    "enabled": true,
    "settings": {
      "temperature": 0.2,
      "max_tokens": 1000,
      "guardrails_enabled": true
    },
    "model": "gpt-4-turbo",
    "deployment": {
      "region": "us-west-2",
      "replicas": 3,
      "auto_scale": true
    }
  }
}

Bash/Shell Code Block

# Build and deploy the voice agent
npm install
npm run type-check
npm run lint
npm run build
npm run deploy --env=production

# Verify deployment
curl https://api.example.com/health
echo "Deployment successful!"

HTML Code Block

<div class="guardrail-status">
  <h3>Guardrail Evaluation</h3>
  <table>
    <tr>
      <td>Toxicity Check</td>
      <td class="status-pass">✓ PASS</td>
    </tr>
    <tr>
      <td>Factual Grounding</td>
      <td class="status-pass">✓ PASS</td>
    </tr>
    <tr>
      <td>Policy Compliance</td>
      <td class="status-fail">✗ FAIL</td>
    </tr>
  </table>
</div>

Long Code Block (Testing Horizontal Scroll)

class ComplexGuardrailSystem implements GuardrailEvaluator {
  private toxicityDetector: ToxicityDetector;
  private factualGroundingValidator: FactualGroundingValidator;
  private policyCompliance: PolicyComplianceChecker;
  private escalationRouter: EscalationRouter;
  private auditLogger: AuditLogger;

  async evaluateResponse(userQuery: string, agentResponse: string, context: ExecutionContext): Promise<EvaluationResult> {
    const toxicityScore = await this.toxicityDetector.analyze(agentResponse);
    const groundingScore = await this.factualGroundingValidator.validate(agentResponse, context.knowledgeBase);
    const complianceChecks = await this.policyCompliance.check(agentResponse, context.policies);
    const timestamp = new Date().toISOString();

    this.auditLogger.log({
      timestamp,
      userQuery,
      agentResponse,
      scores: { toxicityScore, groundingScore },
      complianceChecks
    });

    if (toxicityScore > 0.9 || groundingScore < 0.7 || !complianceChecks.passed) {
      await this.escalationRouter.routeToHuman({ userQuery, agentResponse, reason: "Guardrail violation" });
      return { passed: false, reason: "Failed guardrail checks" };
    }

    return { passed: true, confidence: (toxicityScore + groundingScore) / 2 };
  }
}

12. Mixed Markdown + HTML

This section is critical for identifying parser issues.

Test Case 1: Paragraph → HTML → Paragraph

This is normal Markdown paragraph before an HTML block.

This is Markdown after the HTML block. The question is: does this paragraph remain separate from the HTML block above, or do they merge incorrectly?

Test Case 2: List → HTML → List

Here is an unordered list:

• First item
• Second item
• Third item

And here is another list after the image:

• Next item 1
• Next item 2
• Next item 3

The challenge is whether the parser recognizes that the image is a separate block and doesn't merge it with the list items.

Test Case 3: Code → HTML → Paragraph

Here is a code block:

function test() {
  return true;
}

And here is a paragraph after the HTML div.

13. Media Between Paragraphs

Exact Sequence Test

Paragraph one introduces the concept.

Paragraph two should appear cleanly after the image without text jumbling.

Paragraph three should appear after the video element without jumbling.

Final paragraph to conclude this section.

14. Links

Markdown Links

Visit Halden Solutions homepage to learn more about our engineering services.

HTML Links

Internal HTML link to homepage

External Links

Links with Bold Text

Bold link to homepage

Links with Images

Click the image above to view it at full resolution.

15. Semantic HTML

Details/Summary (Expandable Sections)

const config = {
  enabled: true,
  settings: {}
};
  

Definition List

Guardrail

A control mechanism that limits unsafe system behavior by checking inputs and outputs against defined policies.

Observability

The ability to understand what a system is doing in real-time through logs, metrics, and tracing.

Escalation

The process of routing uncertain or high-risk decisions to a human operator for final approval.

Address Element

16. Final Rendering Checklist

Below is a summary of all content types tested on this page:

Rendering Issues to Investigate

Media Rendering Test

External Image

Local Image

Local Video

YouTube

As you review this page, look for:

1. Image Rendering: Do images from /assets/ display correctly? Check dimensions, styling, and alignment.
2. Video Rendering: Do local video files play with controls? Check the video player functionality.
3. YouTube Embeds: Do YouTube iframes display and allow playback?
4. Text Jumbling: Are paragraphs cleanly separated from HTML blocks, or do they merge incorrectly?
5. Heading Hierarchy: Do all heading levels (H1-H6) render correctly?
6. List Nesting: Do nested lists render with proper indentation and styling?
7. Code Blocks: Do code blocks preserve syntax highlighting? Do long lines scroll horizontally?
8. HTML Attributes: Are inline styles (colors, borders, padding) preserved in HTML elements?
9. Tables: Do Markdown and HTML tables render with proper borders and alignment?
10. Links: Do Markdown and HTML links render correctly? Do external links open in new tabs as specified?

After reviewing this page, you should be able to identify exactly which content types work correctly and which require fixes to markdownToSections() or the rendering pipeline.