### Browser App Configuration Example

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/04-configuration.md

Configuration example tailored for a browser application environment.

```typescript
const marp = new Marp({
  script: false,  // Managed by application
  math: 'katex',  // Faster rendering
  minifyCSS: true,
})
```

--------------------------------

### Full-Featured Configuration Example

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/04-configuration.md

A comprehensive example demonstrating configuration for HTML, emoji, math, script, slug, and Marpit options.

```typescript
const marp = new Marp({
  // Custom HTML
  html: {
    a: ['href', 'target'],
    img: ['src', 'alt'],
    script: [],
  },
  
  // Emoji via PNG CDN
  emoji: {
    shortcode: 'twemoji',
    unicode: 'twemoji',
    twemoji: {
      base: 'https://assets.my-site.com/emoji/',
      ext: 'png',
    }
  },
  
  // Math with KaTeX
  math: {
    lib: 'katex',
    katexFontPath: '/assets/fonts/katex/',
  },
  
  // Security: CSP-compliant CDN script
  script: {
    source: 'cdn',
    nonce: process.env.CSP_NONCE,
  },
  
  // Accessibility: custom slug format
  slug: {
    postSlugify: (slug, i) => `slide-${slug}${i > 0 ? `-${i}` : ''}`,
  },
  
  // Marpit options
  minifyCSS: true,
  looseYAML: false,
})
```

--------------------------------

### Minimal Configuration Example

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/04-configuration.md

An example of a minimal Marp Core configuration, disabling most features.

```typescript
const marp = new Marp({
  html: false,
  emoji: { shortcode: false, unicode: false },
  math: false,
  script: false,
  slug: false,
  minifyCSS: true,
})
```

--------------------------------

### Emoji Configuration: Examples - Custom twemoji CDN

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/04-configuration.md

Example of using a custom twemoji CDN.

```typescript
// Custom twemoji CDN
new Marp({
  emoji: {
    twemoji: {
      base: 'https://my-cdn.example.com/twemoji/',
      ext: 'png',
    }
  }
})
```

--------------------------------

### HTML Configuration: Custom Allowlist

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/04-configuration.md

Example of a custom HTML allowlist.

```typescript
new Marp({
  html: {
    a: ['href', 'target', 'title'],
    img: {
      src: (value) => {
        // Custom validation: only allow same-origin images
        return value.startsWith('/') || value.startsWith('https://mysite.com')
          ? value
          : ''
      },
      alt: true,
      title: true,
    },
    br: [],
    span: ['class'],
  }
})
```

--------------------------------

### Mutation Observer Setup Example

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/10-api-methods.md

Example of setting up a mutation observer for WebKit polyfill support using the observer function.

```typescript
import { observer } from '@marp-team/marp-core/browser'

const cleanup = observer({ target: document, once: false })
cleanup()  // Stop observing
```

--------------------------------

### Math Configuration: Use KaTeX

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/04-configuration.md

Example of using KaTeX for math typesetting.

```typescript
new Marp({ math: 'katex' })
```

--------------------------------

### HTML Configuration: Allow All HTML

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/04-configuration.md

Example of allowing all HTML tags and attributes.

```typescript
new Marp({ html: true })
// Allows all HTML tags and attributes (not recommended for user input)
```

--------------------------------

### Math Configuration: Per-Slide Math Selection

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/04-configuration.md

Example of enabling KaTeX for a specific slide.

```markdown
---
math: katex
---

# Slide with KaTeX

$$x = \frac{-b \pm \sqrt{b^2-4ac}}{2a} $$

```

--------------------------------

### Emoji Configuration: Examples - Unicode emoji only

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/04-configuration.md

Example of enabling shortcode conversion to Unicode but keeping Unicode emojis as-is.

```typescript
// Unicode emoji only (no twemoji)
new Marp({
  emoji: {
    shortcode: true,        // Convert to Unicode
    unicode: false,         // Keep Unicode as-is
  }
})
```

--------------------------------

### Theme Selection: Gaia

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/09-quick-reference.md

Example of selecting the Gaia Marp theme.

```markdown
---
theme: gaia
---

# Gaia (sans-serif, bold, vibrant)
```

--------------------------------

### Theme Selection: Default

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/09-quick-reference.md

Example of selecting the default Marp theme.

```markdown
---
theme: default
---

# Default (serif, light)
```

--------------------------------

### Test Math Rendering

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/09-quick-reference.md

Debugging example to test math rendering with KaTeX.

```typescript
const marp = new Marp({ math: 'katex' })
const { html } = marp.render('$x^2$')
console.log(html)  // Should contain <span class="katex">
```

--------------------------------

### Theme Selection: Uncover

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/09-quick-reference.md

Example of selecting the Uncover Marp theme.

```markdown
---
theme: uncover
---

# Uncover (minimal, elegant)
```

--------------------------------

### HTML Configuration: Disable HTML

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/04-configuration.md

Example of disabling raw HTML.

```typescript
new Marp({ html: false })
// Only allows HTML supported by Marpit (no raw HTML)
```

--------------------------------

### Emoji Configuration: Examples - No emoji conversion

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/04-configuration.md

Example of disabling all emoji conversion.

```typescript
// No emoji conversion
new Marp({
  emoji: {
    shortcode: false,
    unicode: false,
  }
})
```

--------------------------------

### Browser API

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/09-quick-reference.md

Example of using the Marp Core browser API for initialization and updates.

```typescript
import { browser } from '@marp-team/marp-core/browser'

// Initialize browser features
const cleanup = browser(document)

// Update after DOM changes
cleanup.update()

// Cleanup
cleanup()
```

--------------------------------

### Script Injection: Use CDN Script

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/04-configuration.md

Example of using CDN for script injection.

```typescript
new Marp({
  script: {
    source: 'cdn',
  }
})
// Loads from: https://cdn.jsdelivr.net/npm/@marp-team/marp-core@{version}/lib/browser.js
```

--------------------------------

### Enable Verbose Output

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/09-quick-reference.md

Debugging example to enable verbose output by pushing a custom core rule.

```typescript
const marp = new Marp()
marp.use((md) => {
  md.core.ruler.push('debug', (state) => {
    console.log('Tokens:', state.tokens)
  })
})
```

--------------------------------

### Theme Selection via YAML Directive

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/04-configuration.md

Example of how to select a built-in theme using the theme directive in Markdown.

```markdown
---
theme: gaia
---

# Slide
```

--------------------------------

### Common Patterns: Browser: Live Preview

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/09-quick-reference.md

Example of creating a live preview of Marp Markdown in the browser.

```typescript
import { Marp } from '@marp-team/marp-core'
import { browser } from '@marp-team/marp-core/browser'

const marp = new Marp()
let cleanup

function update(markdown) {
  const { html, css } = marp.render(markdown)
  document.getElementById('preview').innerHTML = `<style>${css}</style>${html}`
  cleanup?.()
  cleanup = browser()
}

document.getElementById('editor').addEventListener('input', (e) => {
  update(e.target.value)
})
```

--------------------------------

### Size Preset via YAML Directive

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/04-configuration.md

Example of setting the slide size using the size directive in Markdown.

```markdown
---
theme: gaia
size: 4:3
---

# Traditional Aspect Ratio Slide
```

--------------------------------

### Plugin Registration Example

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/10-api-methods.md

Example of how to register a PostCSS plugin using the `use` method.

```typescript
marp.use(myPostCSSPlugin)
```

--------------------------------

### CommonMark Options

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/04-configuration.md

Example of configuring CommonMark options like typographer, breaks, linkify, and html.

```typescript
new Marp({
  markdown: {
    typographer: true,    // Enable smart quotes, dashes, etc.
    breaks: false,        // Override default (true) - newlines don't become <br>
    linkify: false,       // Override default (true) - don't auto-link URLs
    html: false,          // Override emoji option (use html option instead)
  }
})
```

--------------------------------

### Math Configuration: Disable Math

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/04-configuration.md

Example of disabling math typesetting support.

```typescript
new Marp({ math: false })
// No math typesetting support
```

--------------------------------

### Common Patterns: Node.js: Render to File

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/09-quick-reference.md

Example of rendering Marp Markdown to an HTML file using Node.js.

```typescript
import { Marp } from '@marp-team/marp-core'
import fs from 'fs'

const marp = new Marp()
const { html, css } = marp.render(fs.readFileSync('slides.md', 'utf-8'))

fs.writeFileSync('output.html', `
<!DOCTYPE html>
<html>
<head>
  <style>${css}</style>
</head>
<body>${html}</body>
</html>
`)
```

--------------------------------

### Marpit Integration Options

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/04-configuration.md

Example showing how to pass Marpit options to the Marp constructor, alongside Marp-specific options.

```typescript
new Marp({
  // Marpit options
  anchor: false,              // Don't add anchor links to slides
  cssContainerQuery: true,    // Enable CSS container queries
  inlineSVG: true,           // Inline SVG support (default)
  looseYAML: true,           // Flexible YAML parsing (default)
  
  // Marp-specific
  emoji: { ... },
  html: { ... },
  math: { ... },
  minifyCSS: true,
  script: true,
  slug: true,
})
```

--------------------------------

### Custom Post-Processing for Slugs

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/04-configuration.md

Example of using postSlugify for custom slug formatting, including an index.

```typescript
new Marp({
  slug: {
    slugifier: undefined,  // Use default
    postSlugify: (slug, index) => {
      const prefix = 'section-'
      return index > 0
        ? `${prefix}${slug}-${index}`
        : `${prefix}${slug}`
    }
  }
})
```

--------------------------------

### Browser Initialization Example

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/10-api-methods.md

Example of how to initialize Marp Core browser features and use the cleanup and update functions.

```typescript
import { browser } from '@marp-team/marp-core/browser'

const cleanup = browser(document)
cleanup()  // Stop observing and cleanup
cleanup.update()  // Re-apply after DOM changes
```

--------------------------------

### CSS Minification: Disable Minification

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/04-configuration.md

Example of disabling CSS minification.

```typescript
new Marp({ minifyCSS: false })
// Outputs readable CSS
```

--------------------------------

### HTML Structure Example

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/07-render-output.md

Example of the generated HTML structure for slides.

```html
<div id="marp-1" class="marpit-slide gaia" data-marp-transition="default">
  <section style="">
    <h1 id="slide-title">Title</h1>
    <p>Content</p>
  </section>
</div>
<div id="marp-2" class="marpit-slide gaia">
  <section>
    <h1 id="second-slide">Second Slide</h1>
    <ul>...</ul>
  </section>
</div>
<script>
  (Marp Core browser script here if enabled)
</script>
```

--------------------------------

### Math Configuration: Advanced Configuration

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/04-configuration.md

Advanced math configuration with KaTeX options.

```typescript
new Marp({
  math: {
    lib: 'katex',
    katexOption: {
      // KaTeX options - see https://khan.github.io/KaTeX/docs/options.html
      macros: {
        '\RR': '\mathbb{R}',
        '\CC': '\mathbb{C}',
      },
      throwOnError: false,
      errorColor: '#cc0000',
    },
    katexFontPath: '/assets/katex-fonts/',  // Local fonts
    // katexFontPath: false,  // Use KaTeX defaults
  }
})
```

--------------------------------

### Slide Classes Example

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/07-render-output.md

Example of applying slide-scoped classes and background color via directives.

```markdown
---
_class: lead title
_backgroundColor: #333
---
```

--------------------------------

### Common Patterns: Server: API Endpoint

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/09-quick-reference.md

Example of setting up an API endpoint to render Marp Markdown using Express.

```typescript
import { Marp } from '@marp-team/marp-core'
import express from 'express'

const app = express()
const marp = new Marp()

app.post('/render', express.json(), (req, res) => {
  const { html, css } = marp.render(req.body.markdown)
  res.json({ html, css })
})
```

--------------------------------

### Script Injection: Disable Script Injection

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/04-configuration.md

Example of disabling script injection.

```typescript
new Marp({ script: false })
// Must manually call browser() in browser context
```

--------------------------------

### Custom Slugifier

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/04-configuration.md

Example of providing a custom slugifier function to Marp constructor.

```typescript
new Marp({
  slug: (text) => {
    return text
      .toLowerCase()
      .replace(/\s+/g, '_')
      .replace(/[^\w_]/g, '')
  }
})
```

--------------------------------

### With Static Site Generators

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/06-usage-patterns.md

Example of an Eleventy plugin for Marp Core, enabling the use of `.marp.md` files as a template format.

```typescript
// Eleventy plugin example
const { Marp } = require('@marp-team/marp-core')

module.exports = function(eleventyConfig) {
  const marp = new Marp()
  
  eleventyConfig.addTemplateFormats('marp.md')
  eleventyConfig.addExtension('marp.md', {
    read: false,
    compile: () => {
      return async (data) => {
        const { html, css } = marp.render(data.page.fileContent)
        return `<style>${css}</style>${html}`
      }
    }
  })
}
```

--------------------------------

### Install marp-core

Source: https://github.com/marp-team/marp-core/blob/main/README.md

Install the marp-core package using npm.

```bash
npm install --save @marp-team/marp-core
```

--------------------------------

### Constructor Options (Summary)

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/09-quick-reference.md

Summary of Marp Core constructor options.

```typescript
new Marp({
  // HTML rendering and safety
  html: true | false | { /* allowlist */ },
  
  // Emoji rendering
  emoji: {
    shortcode: false | true | 'twemoji',     // Default: 'twemoji'
    unicode: false | true | 'twemoji',       // Default: 'twemoji'
    twemoji: {
      base: string,    // CDN URL for assets
      ext: 'svg' | 'png'  // Default: 'svg'
    }
  },
  
  // Math typesetting
  math: false | 'mathjax' | 'katex' | {
    lib: 'mathjax' | 'katex',
    katexOption: {},
    katexFontPath: string
  },
  
  // CSS handling
  minifyCSS: true | false,  // Default: true
  
  // Browser script injection
  script: true | false | {
    source: 'inline' | 'cdn',
    nonce: string
  },
  
  // Heading anchor generation
  slug: false | ((text: string) => string) | {
    slugifier: (text: string) => string,
    postSlugify: (slug: string, index: number) => string
  },
  
  // Markdown.js options (only object form)
  markdown: {
    breaks: true | false,
    linkify: true | false,
    typographer: true | false
  },
  
  // ... plus Marpit options (anchor, cssContainerQuery, etc.)
})
```

--------------------------------

### MathOptions Type

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/09-quick-reference.md

Configuration options for math rendering.

```typescript
type MathOptions = boolean | 'mathjax' | 'katex' | {
  lib?: 'mathjax' | 'katex'
  katexOption?: Record<string, unknown>
  katexFontPath?: string | false
}
```

--------------------------------

### HTML Allowlist Example (Tags and Attributes)

Source: https://github.com/marp-team/marp-core/blob/main/README.md

Example of specifying allowed HTML tags and their attributes for rendering.

```javascript
// Specify tag name as key, and attributes to allow as string array.
{
  a: ['href', 'target'],
  br: [],
}
```

--------------------------------

### Built-in Themes Example

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/00-index.md

Example of setting a theme and size in Marp Markdown.

```markdown
---
theme: gaia
size: 16:9  # or 4:3
---
```

--------------------------------

### Complete Example - Input Markdown

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/07-render-output.md

The input Markdown for a complete Marp presentation example, including theme, math, size, auto-scaling headers, code blocks, and math equations.

```markdown
---
theme: gaia
math: katex
size: 16:9
---

# <!-- fit --> Hello World! 👋

This is a **Marp** presentation.

---

# Code Example

```javascript
const marp = new Marp()
const { html, css } = marp.render('# Slide')
```

---

# Math

The equation $x^2 + y^2 = z^2$ is the Pythagorean theorem.

$$
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
$$

```

--------------------------------

### Script Injection: Add CSP Nonce

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/04-configuration.md

Example of adding a CSP nonce to inline scripts.

```typescript
new Marp({
  script: {
    source: 'inline',
    nonce: 'rnd123==',
  }
})
// Renders as: <script nonce="rnd123==">...</script>
```

--------------------------------

### Script Options Example

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/03-types.md

Example of configuring script loading source and CSP nonce.

```typescript
const marp = new Marp({
  script: {
    source: 'cdn',
    nonce: 'rnd123==',
  },
})
```

--------------------------------

### Basic Example

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/00-index.md

A basic example demonstrating Marp Core usage.

```typescript
import { Marp } from '@marp-team/marp-core'

const marp = new Marp()
const { html, css } = marp.render('# Hello World')
```

--------------------------------

### Size Directive Example

Source: https://github.com/marp-team/marp-core/blob/main/README.md

Example of using the 'size' global directive to set slide dimensions to 4:3.

```markdown
---
theme: gaia
size: 4:3
---

# A traditional 4:3 slide
```

--------------------------------

### Marp highlighter example

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/10-api-methods.md

Applies syntax highlighting to code using highlight.js.

```typescript
const marp = new Marp()
const html = marp.highlighter('console.log("hi")', 'javascript', '')
// Returns: <span class="hljs-built_in">console</span>...
```

--------------------------------

### Installation

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/00-index.md

Install Marp Core using npm.

```bash
npm install @marp-team/marp-core
```

--------------------------------

### GFM Tables Example

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/05-features.md

Example of a table using GitHub Flavored Markdown syntax.

```markdown
| Column 1 | Column 2 | Column 3 |
|----------|----------|----------|
| Data 1   | Data 2   | Data 3   |
| Data 4   | Data 5   | Data 6   |
```

--------------------------------

### Slide Classes Example Output

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/07-render-output.md

Resulting HTML for the slide-scoped classes and background color example.

```html
<div class="marpit-slide lead title" style="background-color: #333;">
  ...
</div>
```

--------------------------------

### Auto-Scaling Headers Example

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/00-index.md

Example of using the `fit` directive for headers to auto-scale.

```markdown
# <!-- fit --> Large Title That Fits
```

--------------------------------

### Fitting header example

Source: https://github.com/marp-team/marp-core/blob/main/README.md

Markdown syntax for enabling fitting header auto-scaling.

```markdown
# <!-- fit --> Fitting header

```

--------------------------------

### Inspect Render Result

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/09-quick-reference.md

Debugging example to inspect the length of HTML and CSS output, and the number of slides.

```typescript
const result = marp.render(markdown)
console.log('HTML length:', result.html.length)
console.log('CSS length:', result.css.length)
console.log('Slide count:', (result.html.match(/id="marp-/g) || []).length)
```

--------------------------------

### Complete Example - Output Structure

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/07-render-output.md

The expected JavaScript object output structure containing `html` and `css` properties after rendering the example Markdown.

```javascript
{
  html: `
<div id="marp-1" class="marpit-slide gaia" ...>
  <section ...>
    <h1 class="fitting-header auto-scaling" id="hello-world">
      Hello World! 
      <img class="emoji" data-marp-twemoji="" src="..." alt="👋">
    </h1>
    <p>This is a <strong>Marp</strong> presentation.</p>
  </section>
</div>
<div id="marp-2" class="marpit-slide gaia" ...>
  <section>
    <h1 id="code-example">Code Example</h1>
    <pre class="auto-scaling"><code class="hljs language-javascript">
      <span class="hljs-keyword">const</span> marp = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Marp</span>()
      ...
    </code></pre>
  </section>
</div>
<div id="marp-3" class="marpit-slide gaia" ...>
  <section>
    <h1 id="math">Math</h1>
    <p>The equation <span class="katex">...</span> is the Pythagorean theorem.</p>
    <div class="katex-display auto-scaling">...</div>
  </section>
</div>
<script>/* Marp Core browser script */</script>
  `,
  css: `
/* Gaia theme CSS */
* { margin: 0; padding: 0; }
section { width: 1280px; height: 720px; ... }
...
/* Emoji CSS */
img.emoji { height: 1em; ... }
...
/* KaTeX CSS */
.katex { ... }
...
/* Minified into single compact line if minifyCSS enabled */
  `
}
```

--------------------------------

### Syntax Highlighting Example

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/05-features.md

Demonstrates how to specify languages for syntax highlighting in code blocks.

```markdown
```javascript
const greeting = 'Hello, World!'
console.log(greeting)
```

```python
def greet():
    print("Hello, World!")
greet()
```
```

--------------------------------

### File Watch

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/06-usage-patterns.md

Example of using Chokidar to watch for changes in Markdown files and automatically re-render them to HTML.

```typescript
import { Marp } from '@marp-team/marp-core'
import chokidar from 'chokidar'
import fs from 'fs'

class MarpWatcher {
  constructor(inputDir, outputDir) {
    this.marp = new Marp()
    this.input = inputDir
    this.output = outputDir
  }

  start() {
    chokidar.watch(`${this.input}/**/*.md`)
      .on('change', (path) => this.renderFile(path))
      .on('add', (path) => this.renderFile(path))
  }

  renderFile(mdPath) {
    const markdown = fs.readFileSync(mdPath, 'utf-8')
    const { html, css } = this.marp.render(markdown)
    
    const outPath = mdPath
      .replace(this.input, this.output)
      .replace('.md', '.html')
    
    const htmlContent = `
<!DOCTYPE html>
<html>
<head><style>${css}</style></head>
<body>${html}</body>
</html>
    `
    
    fs.mkdirSync(require('path').dirname(outPath), { recursive: true })
    fs.writeFileSync(outPath, htmlContent)
    console.log(`✓ Rendered: ${outPath}`)
  }
}

const watcher = new MarpWatcher('./presentations', './dist')
watcher.start()
```

--------------------------------

### HTML Allowlist Example (Custom Sanitizer)

Source: https://github.com/marp-team/marp-core/blob/main/README.md

Example of using a custom attribute sanitizer for HTML tags.

```javascript
// You may use custom attribute sanitizer by passing object.
{
  img: {
    src: (value) => (value.startsWith('https://') ? value : '')
  }
}
```

--------------------------------

### Common Configurations: Full-Featured

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/09-quick-reference.md

A full-featured configuration for Marp Core, enabling all common options.

```typescript
new Marp({
  html: true,
  emoji: { shortcode: 'twemoji', unicode: 'twemoji' },
  math: { lib: 'katex', katexFontPath: '/fonts/' },
  minifyCSS: true,
  script: { source: 'inline' },
  slug: true,
})
```

--------------------------------

### Custom Post-Slugify Example

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/10-api-methods.md

Example of defining and using a custom postSlugify function with Marp.

```typescript
const postSlugify = (slug, index) => 
  index > 0 ? `${slug}-${index}` : slug

new Marp({ slug: { postSlugify } })
```

--------------------------------

### HTML Configuration: Default Behavior

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/04-configuration.md

Default HTML configuration uses the default allowlist.

```typescript
new Marp()
// Uses the default allowlist: Marp.html
```

--------------------------------

### Slug (Heading ID) Configuration: Default (GitHub-style)

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/04-configuration.md

Default slug generation is GitHub-style.

```typescript
new Marp()
// Equivalent to:
new Marp({ slug: true })
```

--------------------------------

### GFM Strikethrough Example

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/05-features.md

Example of strikethrough text using GitHub Flavored Markdown syntax.

```markdown
~~This text is struck through~~
```

--------------------------------

### Display Math Example

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/05-features.md

Demonstrates how to use double dollar signs for display mathematical formulas.

```markdown
$$
\begin{align}
E &= mc^2 \\
  &= \text{energy}
\end{align}
$$
```

--------------------------------

### ScriptOptions Type

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/09-quick-reference.md

Configuration options for script injection.

```typescript
type ScriptOptions = {
  source?: 'inline' | 'cdn'
  nonce?: string
}
```

--------------------------------

### Inline Math Example

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/05-features.md

Demonstrates how to use single dollar signs for inline mathematical formulas.

```markdown
The formula $a^2 + b^2 = c^2$ is the Pythagorean theorem.
```

--------------------------------

### MarpCoreBrowser Explicit Cleanup Example

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/10-api-methods.md

Example showing how to explicitly call the cleanup method on the MarpCoreBrowser object.

```typescript
const cleanup = browser()
cleanup.cleanup()  // Explicit cleanup
```

--------------------------------

### Constructor Options Reference

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/04-configuration.md

All options are passed as an object to the Marp constructor.

```typescript
const marp = new Marp({
  emoji: { ... },
  html: true | false | { ... },
  markdown: { ... },
  math: true | false | 'mathjax' | 'katex' | { ... },
  minifyCSS: true | false,
  script: true | false | { ... },
  slug: true | false | (text) => string | { ... },
  // ... plus any Marpit options
})
```

--------------------------------

### Size preset definition example

Source: https://github.com/marp-team/marp-core/blob/main/themes/README.md

Example of defining custom size presets using the @size metadata for different aspect ratios and resolutions.

```css
/**
 * @theme foobar
 * @size 4:3 960px 720px
 * @size 16:9 1280px 720px
 * @size 4K 3840px 2160px
 */

section {
  /* A way to define default size is as same as Marpit theme CSS. */
  width: 960px;
  height: 720px;
}
```

--------------------------------

### Marp render example

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/10-api-methods.md

Renders a complete Markdown presentation into HTML and CSS.

```typescript
const { html, css } = marp.render(`
---
theme: gaia
---

# Slide 1
Content
`)
```

--------------------------------

### Common Configurations: Secure

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/09-quick-reference.md

A secure configuration for Marp Core, with an emphasis on safety.

```typescript
new Marp({
  html: {
    a: ['href', 'target'],
    img: ['src', 'alt'],
  },
  emoji: false,
  math: 'katex',
  script: { source: 'cdn', nonce: process.env.CSP_NONCE },
})
```

--------------------------------

### HTML Sanitization Issues

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/06-usage-patterns.md

Example of configuring HTML sanitization to block non-HTTPS image sources and log warnings.

```typescript
const marp = new Marp({
  html: {
    img: {
      src: (value) => {
        if (!value.startsWith('https://')) {
          console.warn(`Blocking non-HTTPS image: ${value}`)
          return ''
        }
        return value
      }
    }
  }
})

const { html } = marp.render(markdown)
// Blocked images will appear as <img> tags with no src attribute
```

--------------------------------

### Browser Interface Example

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/03-types.md

Example of how to use the Marp Core browser interface for cleanup and updates.

```typescript
const cleanup = browser()
cleanup()  // Or cleanup.cleanup()

const cleanup2 = cleanup.update()
```

--------------------------------

### API Endpoint

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/06-usage-patterns.md

Example of creating an API endpoint using Express.js to render Markdown to HTML and CSS on demand.

```typescript
import { Marp } from '@marp-team/marp-core'
import { Router } from 'express'

const router = Router()
const marp = new Marp()

router.post('/api/render', (req, res) => {
  const { markdown, options } = req.body

  try {
    const customMarp = new Marp(options || {})
    const { html, css } = customMarp.render(markdown)
    
    res.json({
      success: true,
      html,
      css,
    })
  } catch (error) {
    res.status(400).json({
      success: false,
      error: error.message,
    })
  }
})

export default router
```

--------------------------------

### MarpCoreBrowser Cleanup Function Example

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/10-api-methods.md

Example demonstrating that calling the cleanup object as a function is equivalent to calling its explicit cleanup method.

```typescript
const cleanup = browser()
cleanup()  // Same as cleanup.cleanup()
```

--------------------------------

### SlugOptions Type

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/09-quick-reference.md

Configuration options for generating slugs.

```typescript
type SlugOptions = boolean | ((text: string) => string) | {
  slugifier?: (text: string) => string
  postSlugify?: (slug: string, index: number) => string
}
```

--------------------------------

### Marp Instance Options Example

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/01-marp.md

Example demonstrating how to access the resolved constructor options of a Marp instance.

```typescript
const marp = new Marp({ math: 'katex' })
console.log(marp.options.math)  // { lib: 'katex' }
console.log(marp.options.minifyCSS)  // true (default)
```

--------------------------------

### Auto-scaling features example

Source: https://github.com/marp-team/marp-core/blob/main/themes/README.md

Example of using the @auto-scaling metadata to enable fitting header and math scaling.

```css
/**
 * @theme foobar
 * @auto-scaling fittingHeader,math
 */
```

--------------------------------

### Math Configuration: Default (MathJax)

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/04-configuration.md

Default math configuration uses MathJax.

```typescript
new Marp()
// Equivalent to:
new Marp({ math: 'mathjax' })
```

--------------------------------

### Math typesetting with KaTeX

Source: https://github.com/marp-team/marp-core/blob/main/README.md

Example of declaring KaTeX as the math library for a Markdown document.

```markdown
---
# Declare to use KaTeX in this Markdown
math: katex
---

$$
\begin{align}
x &= 1+1 \tag{1} \\
  &= 2
\end{align}
$$

```

--------------------------------

### MarpOptions Usage Example

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/03-types.md

Demonstrates how to instantiate Marp with custom MarpOptions.

```typescript
const opts: MarpOptions = {
  emoji: { shortcode: false },
  math: 'katex',
  minifyCSS: true,
}
const marp = new Marp(opts)
```

--------------------------------

### Marp Static HTML Allowlist Example

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/01-marp.md

Example showing how to access and log the default HTML allowlist.

```typescript
console.log(Marp.html)
// Shows default allowlist with tags like: a, img, script, style, etc.
```

--------------------------------

### MarpOptions Interface

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/09-quick-reference.md

Defines the configuration options for Marp.

```typescript
interface MarpOptions {
  emoji?: EmojiOptions
  html?: boolean | HTMLAllowList
  markdown?: object
  math?: MathOptions
  minifyCSS?: boolean
  script?: boolean | ScriptOptions
  slug?: SlugOptions
}
```

--------------------------------

### Development Configuration

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/06-usage-patterns.md

Configuration for a development environment, allowing all HTML and using twemoji for emojis and SVG.

```typescript
const devMarp = new Marp({
  // All HTML allowed for testing
  html: true,
  
  // Convert all emojis to SVG for visibility
  emoji: {
    shortcode: 'twemoji',
    unicode: 'twemoji',
  },
  
  // Readable CSS
  minifyCSS: false,
  
  // Inline script for development server
  script: {
    source: 'inline',
  },
  
  // MathJax for better rendering
  math: 'mathjax',
})
```

--------------------------------

### Heading ID Generation

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/07-render-output.md

Example of generated heading IDs from markdown.

```markdown
# My Heading
```

--------------------------------

### Default Import

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/09-quick-reference.md

Importing Marp and MarpOptions with default export.

```typescript
// Default
import Marp from '@marp-team/marp-core'
import Marp, { MarpOptions } from '@marp-team/marp-core'
```

--------------------------------

### Emoji Configuration: Default Behavior

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/04-configuration.md

Default emoji configuration.

```typescript
new Marp()
// Equivalent to:
new Marp({
  emoji: {
    shortcode: 'twemoji',    // ":dog:" → SVG image
    unicode: 'twemoji',      // "🐶" → SVG image
    twemoji: {
      base: 'https://cdn.jsdelivr.net/gh/jdecked/twemoji@latest/assets/svg/',
      ext: 'svg',
    }
  }
})
```

--------------------------------

### Usage Example

Source: https://github.com/marp-team/marp-core/blob/main/README.md

Convert Markdown slide deck into HTML and CSS using the Marp class.

```javascript
import { Marp } from '@marp-team/marp-core'

// Convert Markdown slide deck into HTML and CSS
const marp = new Marp()
const { html, css } = marp.render('# Hello, marp-core!')
```

--------------------------------

### MarpCoreBrowser Update Method Example

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/10-api-methods.md

Example of using the update method to re-apply Marp Core features after DOM changes.

```typescript
const cleanup = browser()
// ... add new slides to DOM ...
const newCleanup = cleanup.update()
```

--------------------------------

### EmojiOptions Interface

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/09-quick-reference.md

Configuration options for emoji rendering.

```typescript
interface EmojiOptions {
  shortcode?: boolean | 'twemoji'
  unicode?: boolean | 'twemoji'
  twemoji?: {
    base?: string
    ext?: 'svg' | 'png'
  }
}
```

--------------------------------

### Slug (Heading ID) Configuration: Disable Slugs

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/04-configuration.md

Example of disabling slug generation.

```typescript
new Marp({ slug: false })
// Headings won't get auto-generated id attributes
```

--------------------------------

### Named Import

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/09-quick-reference.md

Importing Marp and MarpOptions with named exports.

```typescript
// Named
import { Marp, MarpOptions } from '@marp-team/marp-core'
```

--------------------------------

### Core Methods: highlighter(code, lang, attrs)

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/09-quick-reference.md

The `highlighter` method highlights code.

```typescript
const highlighted = marp.highlighter('const x = 1', 'javascript', '')
```

--------------------------------

### CSS Minification: Default

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/04-configuration.md

Default CSS minification is enabled.

```typescript
new Marp()
// minifyCSS: true (default)
```

--------------------------------

### Disable Duplication Handling for Slugs

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/04-configuration.md

Example to disable the default suffixing for duplicate slugs by returning the slug as is.

```typescript
new Marp({
  slug: {
    postSlugify: (slug) => slug  // No -2, -3 suffix for duplicates
  }
})
```

--------------------------------

### Lazy Loading

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/06-usage-patterns.md

Demonstrates lazy loading of presentations by fetching Markdown content on demand before rendering.

```typescript
import { Marp } from '@marp-team/marp-core'

// Create once, reuse many times
const marp = new Marp()

// Render on-demand
async function renderPresentation(markdownUrl) {
  const response = await fetch(markdownUrl)
  const markdown = await response.text()
  return marp.render(markdown)
}
```

--------------------------------

### Math Options

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/03-types.md

Examples of enabling and configuring math rendering with MathJax or KaTeX.

```typescript
// Enable math with defaults (MathJax)
new Marp({ math: true })

// Use KaTeX
new Marp({ math: 'katex' })

// Configure KaTeX with custom fonts
new Marp({
  math: {
    lib: 'katex',
    katexFontPath: '/assets/katex-fonts/',
    katexOption: {
      macros: { '\RR': '\mathbb{R}' },
    },
  },
})
```

--------------------------------

### Fitting Header Example

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/05-features.md

Demonstrates how to use the `<!-- fit -->` comment to make a heading scale to fit the slide width.

```markdown
# <!-- fit --> This heading will scale to fit
```

--------------------------------

### Marp constructor example

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/10-api-methods.md

Creates a new Marp parser instance with all plugins configured.

```typescript
const marp = new Marp({
  emoji: { shortcode: 'twemoji' },
  math: 'katex',
})
```

--------------------------------

### Live Preview in Web App

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/06-usage-patterns.md

Implementation of a MarpEditor class for live preview of Markdown in a web application, handling DOM updates and browser features.

```typescript
import { Marp } from '@marp-team/marp-core'
import { browser } from '@marp-team/marp-core/browser'

class MarpEditor {
  constructor(editorElement, previewElement) {
    this.marp = new Marp()
    this.editor = editorElement
    this.preview = previewElement
    this.cleanup = null
  }

  updatePreview(markdown) {
    const { html, css } = this.marp.render(markdown)
    
    // Clear previous cleanup
    this.cleanup?.()
    
    // Update DOM
    this.preview.innerHTML = `<style>${css}</style>${html}`
    
    // Apply browser features
    this.cleanup = browser(this.preview)
  }

  destroy() {
    this.cleanup?.()
  }
}

// Usage
const editor = new MarpEditor(
  document.getElementById('editor'),
  document.getElementById('preview')
)

document.getElementById('editor').addEventListener('input', (e) => {
  editor.updatePreview(e.target.value)
})

window.addEventListener('beforeunload', () => editor.destroy())
```

--------------------------------

### HTML Allow List Example Structure

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/03-types.md

Example structure for defining an HTMLAllowList.

```typescript
const allowlist: HTMLAllowList = {
  // Allow <a> with href and target attributes
  a: ['href', 'target'],
  
  // Allow <img> with custom src validation
  img: {
    src: (value) => {
      // Only allow HTTPS images
      return value.startsWith('https://') ? value : ''
    },
    alt: true,
  },
  
  // Allow <script> with no attributes
  script: [],
}
```

--------------------------------

### Electron Main Process Integration

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/06-usage-patterns.md

Shows how to integrate Marp Core into an Electron application's main process to render Markdown content within a BrowserWindow.

```typescript
import { app, BrowserWindow } from 'electron'
import { Marp } from '@marp-team/marp-core'

const marp = new Marp()

function createWindow() {
  const mainWindow = new BrowserWindow({
    webPreferences: { preload: 'preload.js' }
  })

  const markdown = `
# Electron App
With Marp-Core rendering
  `

  const { html, css } = marp.render(markdown)
  const content = `
<!DOCTYPE html>
<html>
<head>
  <style>${css}</style>
</head>
<body>${html}</body>
</html>
  `

  mainWindow.loadURL(`data:text/html,${encodeURIComponent(content)}`)
}

app.on('ready', createWindow)
```

--------------------------------

### Theme Metadata Example

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/03-types.md

Example of CSS comments used for Marp theme metadata.

```css
/*
 * @theme mytheme
 * @auto-scaling true
 * @size 4:3 960px 720px
 */
```

--------------------------------

### Custom Slugifier Example

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/10-api-methods.md

Example of defining and using a custom slugifier function with Marp.

```typescript
const slugifier = (text: string) => 
  text.toLowerCase().replace(/\s+/g, '_')

new Marp({ slug: slugifier })
```

--------------------------------

### Production Configuration

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/06-usage-patterns.md

Configuration for a production environment with a moderate HTML allowlist, CDN emojis, KaTeX for math, minified CSS, and CDN scripts with CSP nonce.

```typescript
const prodMarp = new Marp({
  // Moderate allowlist
  html: {
    a: ['href', 'target'],
    img: ['src', 'alt'],
    br: [],
    strong: [],
    em: [],
    code: [],
  },
  
  // Emoji from CDN
  emoji: {
    twemoji: {
      base: 'https://assets.cdn.example.com/emoji/',
      ext: 'png',
    }
  },
  
  // KaTeX for performance
  math: 'katex',
  
  // Minify everything
  minifyCSS: true,
  
  // CDN script with CSP nonce
  script: {
    source: 'cdn',
    nonce: process.env.CSP_NONCE,
  },
})
```

--------------------------------

### Slug Options Examples

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/03-types.md

Examples of disabling slugs, using a custom slugifier, and custom post-processing.

```typescript
// Disable slugs
new Marp({ slug: false })

// Custom slugifier
new Marp({
  slug: (text) => text.toLowerCase().replace(/\s+/g, '_'),
})

// Custom post-processing
new Marp({
  slug: {
    postSlugify: (slug, idx) => `section-${slug}${idx > 0 ? `-${idx}` : ''}`,
  },
})
```

--------------------------------

### TwemojiOptions Example

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/03-types.md

Shows how to configure custom base URL and file extension for twemoji assets.

```typescript
const marp = new Marp({
  emoji: {
    twemoji: {
      base: 'https://my-cdn.com/emoji/',
      ext: 'png',
    },
  },
})
```

--------------------------------

### Express Server for Markdown Rendering

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/06-usage-patterns.md

Sets up a basic Express.js server that exposes an endpoint to render Markdown to HTML and CSS via Marp Core.

```typescript
import express from 'express'
import { Marp } from '@marp-team/marp-core'

const app = express()
const marp = new Marp()

app.get('/render', (req, res) => {
  const markdown = req.query.md || '# Default'
  try {
    const { html, css } = marp.render(markdown)
    res.json({ html, css })
  } catch (error) {
    res.status(400).json({ error: error.message })
  }
})

app.listen(3000)
```

--------------------------------

### browser() Function Example

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/02-browser-api.md

Shows how to initialize Marp Core's browser features and how to clean them up or update the DOM.

```typescript
import { browser } from '@marp-team/marp-core/browser'

// Initialize browser features for the entire document
const cleanup = browser()

// Later, clean up resources
cleanup()

// Or call the explicit cleanup method
cleanup.cleanup()

// Update the DOM (e.g., after dynamically adding new slides)
const newCleanup = cleanup.update()
```

--------------------------------

### Marp constructor options

Source: https://github.com/marp-team/marp-core/blob/main/README.md

Example of initializing Marp Core with various constructor options, including Marpit options.

```javascript
const marp = new Marp({
  // marp-core constructor options
  html: true,
  emoji: {
    shortcode: true,
    unicode: false,
    twemoji: {
      base: '/resources/twemoji/',
    },
  },
  math: 'katex',
  minifyCSS: true,
  script: {
    source: 'cdn',
    nonce: 'xxxxxxxxxxxxxxx',
  },
  slug: false,

  // It can be included Marpit constructor options
  looseYAML: false,
  markdown: {
    breaks: false,
  },
})

```

--------------------------------

### Marp Highlighter Method Example

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/01-marp.md

Example of using the highlighter method to syntax highlight code blocks.

```typescript
const marp = new Marp()
const highlighted = marp.highlighter('console.log("hi")', 'javascript', '')
// Returns: <span class="hljs-built_in">console</span>.<span class="hljs-attr">log</span>...
```

--------------------------------

### Catching Markdown Parse Errors

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/06-usage-patterns.md

Example of how to catch and handle errors during the markdown rendering process using a try-catch block.

```typescript
import { Marp } from '@marp-team/marp-core'

const marp = new Marp()

try {
  const { html, css } = marp.render(userMarkdown)
  // Success
} catch (error) {
  console.error('Render error:', error.message)
  // Handle error
}
```

--------------------------------

### Core Methods: render(markdown: string)

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/09-quick-reference.md

The `render` method takes a Markdown string and returns HTML and CSS.

```typescript
const { html, css } = marp.render(markdownString)
```

--------------------------------

### Markdown Math to HTML (KaTeX Output)

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/07-render-output.md

Resulting HTML for markdown math using KaTeX.

```html
<span class="katex">...</span>
```

--------------------------------

### Marp Render Method Example

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/01-marp.md

Example of using the render method to convert Markdown with directives into HTML and CSS.

```typescript
const marp = new Marp()
const { html, css } = marp.render(`
---
theme: gaia
math: katex
---

# Slide 1

Hello world with math: $x^2 + y^2 = z^2$

---

# Slide 2

- Item 1
- Item 2
`)
```

--------------------------------

### Custom Highlight.js Configuration Example

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/05-features.md

Illustrates how to use custom highlight.js configuration by disabling Marp's script and manually calling the browser function.

```typescript
import hljs from 'highlight.js'
import { Marp } from '@marp-team/marp-core'
import { browser } from '@marp-team/marp-core/browser'

// Register custom language
hls.registerLanguage('mycustom', ...)

const marp = new Marp({ script: false })
const { html, css } = marp.render(markdown)

// Later in browser context
document.body.innerHTML = html
const style = document.createElement('style')
style.textContent = css
document.head.appendChild(style)
browser(document)
```

--------------------------------

### Markdown Links to HTML

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/07-render-output.md

Conversion of markdown links to HTML.

```markdown
[text](https://example.com)
Auto-linked: https://example.com
```

--------------------------------

### Disabling inherited size preset example

Source: https://github.com/marp-team/marp-core/blob/main/themes/README.md

Example of disabling a specific size preset (4:3) in an inherited theme using @size [name] false.

```css
/**
 * gaia-16-9 theme is based on Gaia theme, but 4:3 slide cannot use.
 *
 * @theme inherited-from-gaia
 * @size 4:3 false
 */

@import 'gaia';
```

--------------------------------

### Security-Hardened Configuration

Source: https://github.com/marp-team/marp-core/blob/main/_autodocs/06-usage-patterns.md

An example of a Marp Core configuration object that prioritizes security by restricting HTML tags, disallowing external emoji fetching, and enforcing CSP-compliant scripts.

```typescript
const secureMarp = new Marp({
  // Strict HTML allowlist
  html: {
    a: ['href', 'target', 'rel'],
    img: {
      src: (value) => {
        // Only allow HTTPS
        return /^https:\/\/./.test(value) ? value : ''
      },
      alt: true,
      title: true,
    },
    br: [],
    strong: [],
    em: [],
    code: [],
    pre: [],
    // Explicitly disallow script
    script: false,
  },
  
  // Disable external emoji fetching
  emoji: {
    twemoji: {
      base: '/local-emoji-assets/',
      ext: 'svg',
    }
  },
  
  // Use KaTeX for faster math
  math: 'katex',
  
  // CSP-compliant script
  script: {
    source: 'cdn',
    nonce: process.env.CSP_NONCE,
  },
  
  // Disable markdown HTML parsing
  markdown: {
    html: false,
  },
})
```