Code Blocks Test

Code blocks should preserve their content exactly without MDX interpretation.

JavaScript with JSX


function App() {
  return (
    <div className="container">
      <h1>{title}</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

TypeScript with Generics


interface Response<T> {
  data: T;
  error: string | null;
}
 
function fetchData<T>(url: string): Promise<Response<T>> {
  return fetch(url).then(res => res.json());
}
 
const result: Response<User[]> = await fetchData<User[]>('/api/users');

HTML with Unclosed Tags


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <img src="image.png" alt="Image">
  <input type="text" placeholder="Enter text">
  <br>
  <hr>
</body>
</html>

Shell with Variables


#!/bin/bash
export DATABASE_URL="postgres://localhost/db"
echo "Connecting to ${DATABASE_URL}"
 
for file in *.txt; do
  echo "Processing $file"
  cat "$file" | grep -E "pattern"
done
 
if [ -z "$VAR" ]; then
  echo "VAR is not set"
fi

YAML Configuration


server:
  host: localhost
  port: 3000
 
database:
  url: ${DATABASE_URL}
  pool:
    min: 5
    max: 20
 
features:
  - name: auth
    enabled: true
  - name: cache
    enabled: false

JSON with Special Characters


{
  "template": "Hello, {name}!",
  "comparison": "value < 10 && value > 0",
  "html": "<div class=\"container\">Content</div>",
  "regex": "^[a-z]+$"
}

Inline Code

Use {variable} for interpolation.

The type is Array<string> in TypeScript.

Run echo ${HOME} to print home directory.

Compare with if (x < y && y > z) condition.

Fenced Code with Language Hints


// This is JSX
const element = <div>{content}</div>;


// This is TSX
const Component: React.FC<Props> = ({ children }) => <>{children}</>;


// This is MDX
import Component from './Component'
 
<Component prop={value}>
  # Heading inside component
</Component>