# Rendering Guide

Customize how Marked generates HTML output.

## Custom Renderer

```javascript { .api }
import { marked, Renderer } from "marked";

const renderer = new Renderer();

// Override heading rendering
renderer.heading = ({ tokens, depth }) => {
  const text = renderer.parser.parseInline(tokens);
  const id = text.toLowerCase().replace(/[^\w]+/g, '-');
  return `<h${depth} id="${id}">${text}</h${depth}>\n`;
};

// Override link rendering
renderer.link = ({ href, title, tokens }) => {
  const text = renderer.parser.parseInline(tokens);
  const titleAttr = title ? ` title="${title}"` : '';
  const external = href.startsWith('http') ? ' target="_blank" rel="noopener"' : '';
  return `<a href="${href}"${titleAttr}${external}>${text}</a>`;
};

marked.setOptions({ renderer });
```

## Detailed Documentation

For complete renderer documentation, see:

- [Parser & Renderer Reference](../reference/parser-renderer.md)
- [Extension System Reference](../reference/extensions.md)

## Common Rendering Patterns

See [Real-World Scenarios](../examples/real-world-scenarios.md) for complete examples:
- Syntax highlighting
- Custom heading anchors
- External link handling
- Image lazy loading
- Custom blockquotes
