### Configuration Precedence Example

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/configuration.md

Illustrates the order of precedence for Rehype configuration, from highest (direct options) to lowest (plugin defaults).

```javascript
// Precedence order (highest to lowest):

// 1. Direct options (overrides everything)
.use(rehypeStringify, {preferUnquoted: true})

// 2. Processor settings (overrides config files)
.data('settings', {preferUnquoted: false})

// 3. Config file settings (from .rehyperc or package.json)
// If .rehyperc has: {"settings": {"preferUnquoted": true}}

// 4. Plugin defaults
// Default is: preferUnquoted: false
```

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

### Install rehype-stringify with npm

Source: https://github.com/rehypejs/rehype/blob/main/packages/rehype-stringify/readme.md

Install the rehype-stringify package using npm for Node.js environments.

```sh
npm install rehype-stringify
```

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

### Install rehype-parse with npm

Source: https://github.com/rehypejs/rehype/blob/main/packages/rehype-parse/readme.md

Install the package using npm for Node.js environments.

```sh
npm install rehype-parse
```

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

### Rehype CLI Configuration (package.json)

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/api-reference/rehype-cli.md

Example of configuring Rehype CLI within a package.json file. This is useful for project-specific configurations.

```json
{
  "rehype": {
    "plugins": [
      "rehype-format"
    ]
  }
}
```

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

### Rehype CLI Configuration (.rehyperc.json)

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/api-reference/rehype-cli.md

Example of a Rehype CLI configuration file in JSON format. Use this to specify plugins and settings for processing.

```json
{
  "plugins": [
    "rehype-format",
    ["rehype-sanitize", {"unknown": false}]
  ],
  "settings": {
    "fragment": true,
    "preferUnquoted": true
  }
}
```

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

### Example HAST Node with Position

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/types.md

An example illustrating a HAST node with its associated position information, including start and end points.

```javascript
{
  type: 'text',
  value: 'Hello',
  position: {
    start: {line: 1, column: 0, offset: 0},
    end: {line: 1, column: 5, offset: 5}
  }
}
```

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

### Load Local Plugins

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/api-reference/rehype-cli.md

To use local plugins, specify their relative path using the `--use` flag. This allows for custom processing logic not available as installed packages.

```bash
rehype index.html --use ./my-plugin.js
```

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

### Configure rehype Processor Settings

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/api-reference/rehype.md

Configure the rehype processor with custom settings for parsing and stringifying by using the .data('settings', {...}) method. This example sets emitParseErrors, fragment, and preferUnquoted options.

```javascript
const file = await rehype()
  .data('settings', {
    emitParseErrors: true,      // Enable parse error reporting
    fragment: true,              // Parse as fragment, not full document
    preferUnquoted: true        // Unquoted attributes in output
  })
  .process('<div title="test">content</div>')
```

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

### HAST Tree Example

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/ARCHITECTURE.md

Illustrates the structure of a HAST (HTML Abstract Syntax Tree) node, showing nested elements and text content.

```javascript
{
  type: 'root',
  children: [
    {
      type: 'element',
      tagName: 'html',
      properties: {},
      children: [
        {
          type: 'element',
          tagName: 'body',
          properties: {},
          children: [
            {
              type: 'element',
              tagName: 'h1',
              properties: { className: ['title'] },
              children: [
                { type: 'text', value: 'Hello World' }
              ]
            }
          ]
        }
      ]
    }
  ]
}
```

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

### Static Site Generation with rehype-format

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/usage-patterns.md

Format HTML during static site generation using the `rehype-format` plugin. This example reads a file, processes it, and returns the formatted HTML string.

```javascript
import rehypeFormat from 'rehype-format'
import {rehype} from 'rehype'
import fs from 'fs/promises'

async function processFile(filePath) {
  const input = await fs.readFile(filePath, 'utf8')
  
  const result = await rehype()
    .data('settings', {
      preferUnquoted: false,
      quote: '"'
    })
    .use(rehypeFormat)
    .process(input)
  
  return String(result)
}
```

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

### Rehype CLI Configuration (.rehyperc.js)

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/api-reference/rehype-cli.md

Example of a Rehype CLI configuration file using ESM JavaScript syntax. This allows for more complex configuration logic.

```javascript
export default {
  plugins: [
    'rehype-format',
    ['rehype-minify', {}]
  ]
}
```

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

### Configure and Use rehype-stringify Plugin

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/api-reference/rehype-stringify.md

Configure the unified processor with rehype-stringify and its options, then use the processor to stringify a HAST tree into an HTML string. This example shows how to set custom quoting behavior.

```javascript
import rehypeStringify from 'rehype-stringify'
import {unified} from 'unified'

const processor = unified()
  .use(rehypeStringify, {
    preferUnquoted: true,
    quote: '"'
  })

const html = processor.stringify(tree)
console.log(html)
```

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

### Using Unified with Rehype Plugins

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/usage-patterns.md

Integrate rehype parsing and stringifying with the unified interface and plugins. Ensure rehype-parse and rehype-stringify are installed.

```javascript
import rehypeParse from 'rehype-parse'
import rehypeStringify from 'rehype-stringify'
import {unified} from 'unified'

const processor = unified()
  .use(rehypeParse)
  .use(rehypeStringify)

const result = await processor.process('<p>Test</p>')
console.log(String(result))
```

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

### Install rehype-cli

Source: https://github.com/rehypejs/rehype/blob/main/packages/rehype-cli/readme.md

Install the package using npm. This package is ESM-only and requires Node.js version 16 or higher.

```sh
npm install rehype-cli
```

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

### Install Rehype with npm

Source: https://github.com/rehypejs/rehype/blob/main/packages/rehype/readme.md

Install the rehype package using npm for Node.js environments (version 16+).

```sh
npm install rehype
```

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

### Creating a Production Build with Minification

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/configuration.md

Configure rehype for production builds using 'rehype-minify' for optimization. This setup includes parsing, minifying, and stringifying with options to omit optional tags and close self-closing tags.

```javascript
const processor = unified()
  .use(rehypeParse)
  .use(rehypeMinify)
  .use(rehypeStringify, {
    preferUnquoted: true,
    omitOptionalTags: true,
    closeSelfClosing: false,
    tightDoctype: true
  })
```

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

### Import Core Processor and Plugins in JavaScript

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/REFERENCE.md

Import the core rehype processor, parsing plugin, and stringifying plugin for use in your JavaScript project. Ensure you have the necessary packages installed.

```javascript
import {rehype} from 'rehype'

import rehypeParse from 'rehype-parse'

import rehypeStringify from 'rehype-stringify'
```

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

### Transform HTML headings with a custom rehype plugin

Source: https://github.com/rehypejs/rehype/blob/main/readme.md

This example shows how to use rehype to parse HTML, apply a custom plugin to increase heading levels (e.g., h1 to h2), and then stringify the result. It requires the `unist-util-visit` utility for tree traversal.

```javascript
/**
 * @import {Root} from 'hast'
 */

import rehypeParse from 'rehype-parse'
import rehypeStringify from 'rehype-stringify'
import {unified} from 'unified'
import {visit} from 'unist-util-visit'

const file = await unified()
  .use(rehypeParse, {fragment: true})
  .use(myRehypePluginToIncreaseHeadings)
  .use(rehypeStringify)
  .process('<h1>Hi, Saturn!</h1>')

console.log(String(file))

function myRehypePluginToIncreaseHeadings() {
  /**
   * @param {Root} tree
   */
  return function (tree) {
    visit(tree, 'element', function (node) {
      if (['h1', 'h2', 'h3', 'h4', 'h5'].includes(node.tagName)) {
        node.tagName = 'h' + (Number(node.tagName.charAt(1)) + 1)
      }
    })
  }
}
```

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

### Use Rehype with rehype-format

Source: https://github.com/rehypejs/rehype/blob/main/packages/rehype/readme.md

Process an HTML string using rehype and the rehype-format plugin. This example demonstrates basic usage in a Node.js environment.

```js
import {rehype} from 'rehype'
import rehypeFormat from 'rehype-format'

const file = await rehype().use(rehypeFormat).process(`<!doctype html>
        <html lang=en>
<head>
    <title>Hi!</title>
  </head>
  <body>
    <h1>Hello!</h1>

</body></html>`)

console.error(String(file))
```

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

### Use rehype-stringify to process Markdown

Source: https://github.com/rehypejs/rehype/blob/main/packages/rehype-stringify/readme.md

Process Markdown text to HTML using remark-parse, remark-gfm, remark-rehype, and rehype-stringify. This example demonstrates a typical pipeline for converting Markdown to HTML.

```js
import remarkRehype from 'remark-rehype'
import rehypeStringify from 'rehype-stringify'
import remarkGfm from 'remark-gfm'
import remarkParse from 'remark-parse'
import {unified} from 'unified'

const file = await unified()
  .use(remarkParse)
  .use(remarkGfm)
  .use(remarkRehype)
  .use(rehypeStringify)
  .process('# Hi

*Hello*, world!')

console.log(String(file))
```

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

### Set Plugin Options via CLI

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/configuration.md

Configure plugin options directly from the command line using the `--use` flag and `-s` for settings.

```bash
rehype index.html --use plugin-name -s option=value
```

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

### Rehype CLI Information Options

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/REFERENCE.md

Options to display help, version, or verbose output.

```bash
rehype -h, --help
rehype -v, --version
rehype --verbose
```

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

### Import rehype-stringify in Browsers

Source: https://github.com/rehypejs/rehype/blob/main/packages/rehype-stringify/readme.md

Import rehype-stringify in the browser using esm.sh with bundling.

```html
<script type="module">
  import rehypeStringify from 'https://esm.sh/rehype-stringify@10?bundle'
</script>
```

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

### HAST Element Example

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/types.md

An example of a HAST element node representing an anchor tag with properties and text content.

```javascript
{
  type: 'element',
  tagName: 'a',
  properties: { href: '/page', className: ['link'] },
  children: [{type: 'text', value: 'Click here'}]
}
```

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

### Add Plugins to Rehype Processor

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/ARCHITECTURE.md

Demonstrates how to chain multiple plugins to a rehype processor instance for transformations like formatting, minification, sanitization, and custom logic.

```javascript
const processor = rehype()
  .use(rehypeFormat)      // Formatting
  .use(rehypeMinify)      // Minification
  .use(rehypeSanitize)    // Security
  .use(customPlugin)      // Custom transformation
```

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

### Rehype Processor Data Management

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/REFERENCE.md

Methods for getting and setting data associated with the processor.

```javascript
.data(key: string): any
.data(key: string, value: unknown): this
```

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

### Rehype CLI: Pass Settings to Plugins

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/api-reference/rehype-cli.md

Command to process an HTML file, apply a plugin, and pass specific settings to that plugin using the --setting flag.

```bash
rehype index.html \
  --use rehype-format \
  --setting indentInitial=false \
  -o
```

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

### Parse HTML to Markdown with rehype-parse

Source: https://github.com/rehypejs/rehype/blob/main/packages/rehype-parse/readme.md

Use rehype-parse with rehype-remark and remark-stringify to convert HTML to Markdown. Ensure you have the necessary packages installed.

```js
import rehypeParse from 'rehype-parse'
import rehypeRemark from 'rehype-remark'
import remarkStringify from 'remark-stringify'
import {unified} from 'unified'

const file = await unified()
  .use(rehypeParse)
  .use(rehypeRemark)
  .use(remarkStringify)
  .process('<h1>Hello, world!</h1>')

console.log(String(file))
```

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

### Import rehype-stringify in Deno

Source: https://github.com/rehypejs/rehype/blob/main/packages/rehype-stringify/readme.md

Import rehype-stringify in Deno using esm.sh.

```js
import rehypeStringify from 'https://esm.sh/rehype-stringify@10'
```

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

### Unified Settings Integration

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/api-reference/rehype-parse.md

Illustrates how to pass settings to rehype-parse through the Unified processor's data system.

```APIDOC
## Unified Settings Integration

### Description
Settings for `rehype-parse` can be provided via the Unified processor's `.data('settings', {...})` method.

### Usage
```javascript
const processor = unified()
  .use(rehypeParse)
  .data('settings', {
    fragment: true,
    emitParseErrors: true,
    missingDoctype: false // Example of ignoring a specific error
  })
```
```

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

### Rehype Ignore File Format

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/api-reference/rehype-cli.md

Example of a .rehypeignore file, which specifies files and directories to be ignored by the CLI. The format is similar to .gitignore.

```ignore
# Ignore build directory
dist/
build/

# Ignore vendor
node_modules/

# Ignore specific files
broken.html
```

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

### Filter and Remove HTML Elements with Rehype Plugin

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/usage-patterns.md

Removes specific HTML elements from the document tree. This example demonstrates removing all `<script>` tags.

```javascript
import {remove} from 'unist-util-remove'

function removeScripts() {
  return function transformer(tree) {
    remove(tree, (node) => {
      return node.type === 'element' && node.tagName === 'script'
    })
  }
}
```

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

### Modify HTML Elements with Rehype Plugin

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/usage-patterns.md

Transforms existing HTML elements by changing their tag names. This example upgrades all `h2` tags to `h1`.

```javascript
import {rehype} from 'rehype'
import {visit} from 'unist-util-visit'

function changeHeadings() {
  return function transformer(tree) {
    visit(tree, 'element', (node) => {
      // Upgrade all h2 to h1
      if (node.tagName === 'h2') {
        node.tagName = 'h1'
      }
    })
  }
}

const result = await rehype()
  .use(changeHeadings)
  .process('<h2>Title</h2>')
// Output: <h1>Title</h1>
```

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

### Accessing the HAST Tree

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/usage-patterns.md

Get the HAST (Hypertext Abstract Syntax Tree) without final serialization. Useful for inspecting or transforming the HTML structure.

```javascript
import {rehype} from 'rehype'

const processor = rehype()
const tree = processor.parse('<h1>Hello</h1>')

console.log(JSON.stringify(tree, null, 2))
// Shows the complete HAST tree structure
```

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

### Basic Serialization with rehype-stringify

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/api-reference/rehype-stringify.md

Demonstrates the basic usage of rehype-stringify to convert an AST to an HTML string. Ensure rehype-stringify is imported and used with the unified process.

```javascript
const tree = {
  type: 'root',
  children: [
    {
      type: 'element',
      tagName: 'h1',
      properties: {},
      children: [{type: 'text', value: 'Hello'}]
    }
  ]
}

const html = unified()
  .use(rehypeStringify)
  .stringify(tree)
// Output: "<h1>Hello</h1>"
```

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

### Import rehype-parse in the browser

Source: https://github.com/rehypejs/rehype/blob/main/packages/rehype-parse/readme.md

Import the package in the browser using esm.sh with bundling.

```html
<script type="module">
  import rehypeParse from 'https://esm.sh/rehype-parse@9?bundle'
</script>
```

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

### Pass Options to Rehype Plugins

Source: https://github.com/rehypejs/rehype/blob/main/packages/rehype/readme.md

Pass options to rehype-parse and rehype-stringify via the 'settings' data. This example shows how to enable 'emitParseErrors', 'fragment', and 'preferUnquoted' options.

```js
import {rehype} from 'rehype'
import {reporter} from 'vfile-reporter'

const file = await rehype()
  .data('settings', {
    emitParseErrors: true,
    fragment: true,
    preferUnquoted: true
  })
  .process('<div title="a" title="b"></div>')

console.error(reporter(file))
console.log(String(file))
```

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

### Extract Information from HTML with Rehype Plugin

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/usage-patterns.md

Extracts specific data from HTML elements, such as headings and their levels. It uses a helper function to get text content.

```javascript
function extractHeadings() {
  const headings = []
  
  return function transformer(tree) {
    visit(tree, 'element', (node) => {
      if (['h1', 'h2', 'h3'].includes(node.tagName)) {
        headings.push({
          level: parseInt(node.tagName[1]),
          text: extractText(node)
        })
      }
    })
  }
  
  function extractText(node) {
    return node.children
      .filter(child => child.type === 'text')
      .map(child => child.value)
      .join('')
  }
}
```

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

### Set Single Values via CLI

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/configuration.md

Use the `-s` or `--setting` flag to set single configuration values on the command line.

```bash
rehype index.html -s fragment=true
```

```bash
rehype index.html -s quote="\'"
```

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

### Position Type

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/types.md

The Position type is used to track source location information within HAST nodes. It includes start and end points, and optional indentation information.

```APIDOC
## Position Type

### Description
Source location information.

### Properties
- **start** (Point) - Required - Start position
- **end** (Point) - Required - End position
- **indent** (number[]) - Optional - Indentation info (advanced).
```

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

### Configure rehype-stringify via processor settings

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/configuration.md

Configure HTML serialization behavior by setting options on the processor using `.data('settings', {...})` after initializing the plugin.

```javascript
const processor = unified()
  .use(rehypeStringify)
  .data('settings', {
    preferUnquoted: true,
    quote: '"'
  })
```

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

### Building a Static Site

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/configuration.md

Configure rehype for static site builds by parsing HTML as a fragment, disabling parse errors, using 'rehype-format', and stringifying with specific quote settings.

```javascript
const processor = unified()
  .use(rehypeParse, {
    fragment: false,
    emitParseErrors: false
  })
  .use(rehypeFormat)
  .use(rehypeStringify, {
    preferUnquoted: false,
    quote: '"'
  })
```

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

### Fragment vs Document Mode

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/api-reference/rehype-parse.md

Demonstrates the difference between parsing HTML as a fragment or a full document.

```APIDOC
## Fragment Mode

### Description
Parses HTML as a fragment, meaning the output AST will not be wrapped in `<html>`, `<head>`, or `<body>` tags.

### Usage
```javascript
const tree = unified()
  .use(rehypeParse, {fragment: true})
  .parse('<h1>Title</h1><p>Content</p>')
```

## Document Mode

### Description
Parses HTML as a full document, resulting in an AST that includes `<html>`, `<head>`, and `<body>` tags.

### Usage
```javascript
const tree = unified()
  .use(rehypeParse, {fragment: false})
  .parse('<h1>Title</h1><p>Content</p>')
```
```

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

### Rehype CLI Input/Output Options

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/REFERENCE.md

Options for specifying output location, file path, and stdout behavior.

```bash
rehype -o, --output [path]
rehype --file-path <path>
rehype --stdout
rehype --no-stdout
```

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

### Minify HTML with rehype

Source: https://github.com/rehypejs/rehype/blob/main/readme.md

Use rehype to parse HTML, apply the minify preset, and stringify it back to HTML. This example demonstrates a common use case for cleaning up HTML.

```javascript
import rehypeParse from 'rehype-parse'
import rehypePresetMinify from 'rehype-preset-minify'
import rehypeStringify from 'rehype-stringify'
import {unified} from 'unified'

const file = await unified()
  .use(rehypeParse)
  .use(rehypePresetMinify)
  .use(rehypeStringify).process(`<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Saturn</title>
  </head>
  <body>
    <h1>Saturn</h1>
    <p>Saturn is a gas giant composed predominantly of hydrogen and helium.</p>
  </body>
</html>`)

console.log(String(file))
```

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

### Rehype Processor Plugin Management

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/REFERENCE.md

Methods for adding plugins and freezing the processor configuration.

```javascript
.use(plugin, ...options): this
.freeze(): this
```

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

### Use Multiple Rehype Plugins

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/usage-patterns.md

Chains multiple plugins sequentially for processing. Plugins are applied in the order they are added using `.use()`.

```javascript
import rehypeFormat from 'rehype-format'
import rehypeMinify from 'rehype-minify'
import {rehype} from 'rehype'

const result = await rehype()
  .use(rehypeFormat)           // First format
  .use(rehypeMinify)           // Then minify
  .process('<h1>Test</h1>')
```

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

### Position Type Definition

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/types.md

Defines the structure for source location information, including start and end positions, and optional indentation details. Used for tracking source locations in HAST nodes.

```typescript
type Position = {
  start: Point
  end: Point
  indent?: number[]
}
```

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

### Rehype CLI: Chain Multiple Plugins

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/api-reference/rehype-cli.md

Command to process an HTML file and apply multiple plugins sequentially. Each plugin is specified with a separate --use flag.

```bash
rehype index.html \
  --use rehype-format \
  --use rehype-minify \
  -o
```

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

### Development vs. Production Configuration

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/configuration.md

Use this configuration file to set different rehype plugins and settings based on the NODE_ENV environment variable. Development uses 'rehype-format', while production uses 'rehype-minify'.

```javascript
export default process.env.NODE_ENV === 'development'
  ? {
      plugins: ['rehype-format'],
      settings: {
        preferUnquoted: false,
        space: 'html'
      }
    }
  : {
      plugins: ['rehype-minify'],
      settings: {
        omitOptionalTags: true,
        preferUnquoted: true
      }
    }
```

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

### Rehype CLI: Add Formatting Plugin

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/api-reference/rehype-cli.md

Command to process an HTML file and apply the 'rehype-format' plugin for pretty-printing.

```bash
rehype index.html --use rehype-format -o
```

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

### Rehype API Reference

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/INDEX.md

Provides detailed information about Rehype's exported functions, including their signatures, parameter types, default values, and return types. It also includes usage examples and information on dependencies.

```APIDOC
## API Documentation

### Function Signatures
- Detailed signatures with exact types for all exported functions.

### Parameters
- Parameter tables include types and default values.

### Return Types
- Descriptions of return types for each function.

### Usage Examples
- Code examples demonstrating how to use each API function.

### Dependencies
- Information on related modules and dependencies.
```

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

### Markdown to HTML Conversion with unified, remark-parse, remark-rehype, and rehype-stringify

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/usage-patterns.md

Convert Markdown to HTML by chaining parsers and compilers using the `unified` ecosystem. This example parses Markdown, converts it to an HTML tree, and then serializes it to an HTML string.

```javascript
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import rehypeStringify from 'rehype-stringify'
import {unified} from 'unified'

const result = await unified()
  .use(remarkParse)                    // Parse markdown
  .use(remarkRehype)                   // Convert to HTML tree
  .use(rehypeStringify)                // Serialize to HTML
  .process('# Hello\n\nWorld')

console.log(String(result))
// <h1>Hello</h1>\n<p>World</p>
```

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

### YAML Configuration File (.rehyperc.yml)

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/configuration.md

Configure Rehype plugins and settings using a YAML file. Provides a more readable syntax for configuration.

```yaml
plugins:
  - rehype-format
  - - rehype-minify
    - omitOptionalTags: true
      preferUnquoted: true

settings:
  fragment: true
  emitParseErrors: false
```

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

### Create and Use rehype Processor

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/api-reference/rehype.md

Create a new unified processor with rehype-parse and rehype-stringify plugins applied. Use the .use() method to add other plugins like rehypeFormat and .process() to transform HTML input.

```javascript
import {rehype} from 'rehype'
import rehypeFormat from 'rehype-format'

const file = await rehype()
  .use(rehypeFormat)
  .process('<!doctype html><html><body><h1>Test</h1></body></html>')

console.log(String(file))
```

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

### Use Rehype Plugin with Options

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/usage-patterns.md

Configures a plugin with specific options during its application. Pass an options object as the second argument to `.use()`.

```javascript
import rehypeSanitize from 'rehype-sanitize'
import {rehype} from 'rehype'

const result = await rehype()
  .use(rehypeSanitize, {
    allowElements: ['h1', 'p'],
    allowAttributes: {}
  })
  .process(untrustedHtml)
```

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

### Rehype CLI Help Output

Source: https://github.com/rehypejs/rehype/blob/main/packages/rehype-cli/readme.md

This is the help output for the rehype CLI, detailing available options for processing HTML files and configuring plugins.

```txt
Usage: rehype [options] [path | glob ...]

  CLI to process HTML with rehype

Options:

      --[no-]color                        specify color in report (on by default)
      --[no-]config                       search for configuration files (on by default)
  -e  --ext <extensions>                  specify extensions
      --file-path <path>                  specify path to process as
  -f  --frail                             exit with 1 on warnings
  -h  --help                              output usage information
      --[no-]ignore                       search for ignore files (on by default)
  -i  --ignore-path <path>                specify ignore file
      --ignore-path-resolve-from cwd|dir  resolve patterns in `ignore-path` from its directory or cwd
      --ignore-pattern <globs>            specify ignore patterns
      --inspect                           output formatted syntax tree
  -o  --output [path]                     specify output location
  -q  --quiet                             output only warnings and errors
  -r  --rc-path <path>                    specify configuration file
      --report <reporter>                 specify reporter
  -s  --setting <settings>                specify settings
  -S  --silent                            output only errors
      --silently-ignore                   do not fail when given ignored files
      --[no-]stdout                       specify writing to stdout (on by default)
  -t  --tree                              specify input and output as syntax tree
      --tree-in                           specify input as syntax tree
      --tree-out                          output syntax tree
  -u  --use <plugins>                     use plugins
      --verbose                           report extra info for messages
  -v  --version                           output version number
  -w  --watch                             watch for changes and reprocess

Examples:

  # Process `input.html`
  $ rehype input.html -o output.html

  # Pipe
  $ rehype < input.html > output.html

  # Rewrite all applicable files
  $ rehype . -o
```

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

### Minification Options

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/api-reference/rehype-stringify.md

Shows how to combine various options with rehype-stringify to minimize the output HTML.

```APIDOC
## Minification Options

```javascript
const html = unified()
  .use(rehypeStringify, {
    preferUnquoted: true,
    omitOptionalTags: true,
    tightDoctype: true,
    closeSelfClosing: false,  // <img>, not <img />
    collapseEmptyAttributes: true,
    characterReferences: {
      useShortestReferences: true
    }
  })
  .stringify(tree)
```
```

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

### unified().use(rehypeParse[, options])

Source: https://github.com/rehypejs/rehype/blob/main/packages/rehype-parse/readme.md

Plugin to add support for parsing from HTML. It takes an optional options object for configuration.

```APIDOC
## unified().use(rehypeParse[, options])

### Description
Plugin to add support for parsing from HTML.

### Parameters
#### Path Parameters
- **options** (Options, optional) - configuration

### Returns
Nothing (`undefined`).
```

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

### Process Files with Rehype Plugins via CLI

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/usage-patterns.md

Apply multiple Rehype plugins for formatting and minification directly from the command line.

```bash
# Format and minify
rehype . \
  --use rehype-format \
  --use rehype-minify \
  -o
```

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

### Rehype CLI Processing Options

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/REFERENCE.md

Options to control plugin loading, settings, file extensions, and tree input/output.

```bash
rehype -u, --use <plugins>
rehype -s, --setting <settings>
rehype -e, --ext <extensions>
rehype -t, --tree
rehype --tree-in
rehype --tree-out
rehype --inspect
```

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

### Rehype Configuration Options

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/INDEX.md

A comprehensive reference for all configuration options available for Rehype plugins, including CLI syntax and configuration file formats.

```APIDOC
## Configuration

### Options Reference
- Complete options reference for each plugin.
- Documentation for 50+ documented options.

### CLI Syntax
- Examples and syntax for command-line options.
- Documentation for 25+ command-line options.

### Configuration Files
- Supported formats: JSON, JS, YAML.
- Explanation of configuration precedence.
- Information on preset configurations.
```

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

### Specify Custom File Extensions

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/api-reference/rehype-cli.md

Use the `--ext` flag to specify custom file extensions for Rehype to process. This is useful when working with files that do not have standard HTML extensions.

```bash
rehype --ext md,mdx src/
```

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

### Rehype CLI Configuration Options

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/REFERENCE.md

Options to specify configuration file paths and control config file searching.

```bash
rehype -r, --rc-path <path>
rehype --config
rehype --no-config
```

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

### Configure rehype-parse via processor settings

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/configuration.md

Configure HTML parsing behavior by setting options on the processor using `.data('settings', {...})` after initializing the plugin.

```javascript
const processor = unified()
  .use(rehypeParse)
  .data('settings', {
    fragment: true,
    emitParseErrors: true,
    missingDoctype: 1
  })
```

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

### Rehype CLI: View Syntax Tree

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/api-reference/rehype-cli.md

Command to process an HTML file and output its abstract syntax tree (AST) to the console for inspection.

```bash
rehype index.html --tree-out
```

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

### Rehype Plugin Settings Integration

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/ARCHITECTURE.md

Shows how a plugin can access shared settings from the unified processor instance. Merges processor settings with plugin options.

```javascript
export default function myPlugin(options) {
  const self = this  // unified processor instance
  const settings = {...self.data('settings'), ...options}
  
  return function transformer(tree, file) {
    // Use merged settings
  }
}
```

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

### JavaScript Configuration File (.rehyperc.js)

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/configuration.md

Configure Rehype plugins and settings using a JavaScript file. Allows for dynamic configuration.

```javascript
export default {
  plugins: [
    'rehype-format',
    ['rehype-minify', {
      omitOptionalTags: true,
      preferUnquoted: true
    }]
  ],
  settings: {
    fragment: true,
    emitParseErrors: false
  }
}
```

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

### Import Unified Framework and HAST Utilities in JavaScript

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/REFERENCE.md

Import the unified framework and utilities for working with HAST (Hypertext Abstract Syntax Tree) in your JavaScript code. These are essential for manipulating the document structure.

```javascript
import {unified} from 'unified'

import {visit} from 'unist-util-visit'
import {remove} from 'unist-util-remove'
```

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

### Rehype Processor Core Methods

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/REFERENCE.md

Core methods for parsing input to a syntax tree, serializing a tree to a string, and processing input to a VFile.

```javascript
.parse(input: string): Root
.stringify(tree: Root): string
.process(input: string | VFile): Promise<VFile>
.processSync(input: string | VFile): VFile
```

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

### Rehype CLI: View Formatted AST

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/api-reference/rehype-cli.md

Command to process an HTML file and display a human-readable, formatted version of its AST.

```bash
rehype index.html --inspect
```

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

### Rehype Plugin Usage

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/ARCHITECTURE.md

Demonstrates how to use a custom plugin with the rehype processor. The plugin is applied using the .use() method.

```javascript
const processor = rehype()
  .use(myPlugin, {option: 'value'})
  .process(input)
```

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

### unified().use(rehypeStringify[, options])

Source: https://github.com/rehypejs/rehype/blob/main/packages/rehype-stringify/readme.md

Plugin to add support for serializing to HTML. It takes an optional configuration object for customization.

```APIDOC
## unified().use(rehypeStringify[, options])

### Description
Plugin to add support for serializing to HTML.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
* `options` ([`Options`][api-options], optional) - configuration

### Returns
Nothing (`undefined`).
```

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

### Import rehype-parse in Deno

Source: https://github.com/rehypejs/rehype/blob/main/packages/rehype-parse/readme.md

Import the package in Deno using esm.sh.

```js
import rehypeParse from 'https://esm.sh/rehype-parse@9'
```

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

### Configure Unified Processor Settings

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/api-reference/rehype-parse.md

Pass settings like `fragment`, `emitParseErrors`, or specific error overrides (e.g., `missingDoctype: false`) to the `rehype-parse` plugin via the unified processor's `.data('settings', {...})` method.

```javascript
const processor = unified()
  .use(rehypeParse)
  .data('settings', {
    fragment: true,
    emitParseErrors: true,
    missingDoctype: false  // Ignore this specific error
  })
```

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

### Set Boolean Values via CLI

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/configuration.md

Set boolean configuration values like `preferUnquoted` to `true` or `false` using the CLI.

```bash
rehype index.html -s preferUnquoted=true
```

```bash
rehype index.html -s preferUnquoted=false
```

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

### Configure Rehype Plugins with a JSON File

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/usage-patterns.md

Define Rehype plugins in a `.rehyperc.json` configuration file for consistent processing.

```json
{
  "plugins": [
    "rehype-format",
    "rehype-minify"
  ]
}
```

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

### Rehype Core Processor Configuration

Source: https://github.com/rehypejs/rehype/blob/main/_autodocs/ARCHITECTURE.md

This snippet shows how the main rehype module is configured as a pre-built unified processor with rehype-parse and rehype-stringify plugins already included. It's designed to be frozen for efficiency and serves as the primary entry point for library usage.

```javascript
export const rehype = unified()
  .use(rehypeParse)
  .use(rehypeStringify)
  .freeze()
```