prettier-plugin-markdown-html

1.4.0 verified Sat Apr 25 auth: no javascript

A Prettier plugin that formats raw HTML fragments inside Markdown files (e.g., README.md), including those split by Markdown syntax. Version 1.4.0, stable, actively maintained. Released under MIT, ships TypeScript types. Key differentiators: respects Prettier's built-in HTML options, has no additional dependencies, and offers fragment-specific options like htmlFragmentPrintWidth and htmlFragmentSingleAttributePerLine that override global Prettier settings without affecting code blocks.

Common errors

error Cannot find module 'prettier-plugin-markdown-html' ↓

cause Plugin not installed or not in node_modules.

fix

Run npm install --save-dev prettier-plugin-markdown-html and ensure your Prettier config has it listed under 'plugins'.

error Error [ERR_REQUIRE_ESM]: require() of ES Module ... from ... not supported. ↓

cause Prettier is loaded via require() but plugin uses ESM.

fix

Ensure Prettier is run in ESM mode (e.g., use node --experimental-vm-modules or configure Prettier to use ESM loader) or switch to a CJS-compatible version.

error TypeError: Cannot read properties of undefined (reading 'options') ↓

cause Plugin loaded incorrectly (e.g., double import or old Prettier version).

fix

Upgrade Prettier to >=3.0.0 and ensure the plugin is listed once in the plugins array.

Warnings

deprecated Versions before 1.0.0 were experimental and may have unstable behavior. ↓

fix Upgrade to ^1.0.0 or later.

breaking Node.js versions below 20 are not supported. The plugin requires node >=20. ↓

fix Update Node.js to version 20 or higher.

gotcha Plugin options like htmlFragmentPrintWidth only affect raw HTML fragments, not code blocks or other Markdown content. Setting them may not have the expected global effect. ↓

fix Use these options only for fragment-specific tuning; consider using global printWidth for overall formatting.

deprecated Versions 1.0.0 and 1.1.0 had a bug where htmlFragmentWhitespaceSensitivity was not always respected. Fixed in 1.2.0. ↓

fix Upgrade to >=1.2.0 to ensure the option works correctly.

Install

npm install prettier-plugin-markdown-html

yarn add prettier-plugin-markdown-html

pnpm add prettier-plugin-markdown-html

Imports

default (plugin auto-discovery)
```
Add 'prettier-plugin-markdown-html' to plugins array in Prettier config.
```
No JavaScript import needed; plugin is auto-discovered by Prettier when listed in config.

Quickstart

Minimal Prettier config enabling the plugin with custom fragment options, plus example input/output showing HTML formatting in Markdown.

// .prettierrc
{
  "plugins": ["prettier-plugin-markdown-html"],
  "htmlFragmentPrintWidth": 80,
  "htmlFragmentSingleAttributePerLine": false,
  "htmlFragmentWhitespaceSensitivity": "css"
}

// Example input.md:
// # Title
// <div   class="container"   ><p>Hello</p></div>

// Run: npx prettier --write input.md
// Output:
// # Title
// <div class="container">
//   <p>Hello</p>
// </div>