# postcss-markdown > PostCSS syntax for parsing Markdown Latest version **2.0.0** (published 2026-08-01) · MIT license · 0 weekly downloads ## Install ```sh npm install postcss-markdown pnpm add postcss-markdown yarn add postcss-markdown bun add postcss-markdown ``` ## Health **Score 65/100 (B)** — status: active. Positive: esm support; no vulnerabilities; has provenance; recently updated; high maintenance score. Warnings: low downloads; no types. ## Facts | | | |---|---| | Version | 2.0.0 | | Published | 2026-08-01 | | First published | 2018-04-09 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Node | ^22.12 \|\| >=24 | | Dependencies | 4 | | Unpacked size | 29.8 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 6 | | Author | gucong | | Maintainers | jeddy3, ai, gucong, ota-meshi | | Keywords | postcss, syntax, markdown, html, css, less, sass, scss, sss, sugarss | ## Links - npm: https://www.npmjs.com/package/postcss-markdown - Repository: https://github.com/ota-meshi/postcss-markdown - Homepage: https://github.com/ota-meshi/postcss-markdown#readme - Issues: https://github.com/ota-meshi/postcss-markdown/issues - npm.io page: https://npm.io/package/postcss-markdown ## Dependencies (4) - [postcss-safe-parser](https://npm.io/package/postcss-safe-parser.md) ^7.0.1 - [mdast-util-frontmatter](https://npm.io/package/mdast-util-frontmatter.md) ^2.0.1 - [mdast-util-from-markdown](https://npm.io/package/mdast-util-from-markdown.md) ^2.0.3 - [micromark-extension-frontmatter](https://npm.io/package/micromark-extension-frontmatter.md) ^2.0.0 ## Alternatives - [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads - [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads - [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads - [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads - [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads ## Recent versions - 2.0.0 (latest) — 2026-08-01 - 1.0.0-beta.2 (next) — 2021-10-26 - 1.3.1 — 2026-01-13 - 1.3.0 — 2025-01-14 - 1.2.0 — 2021-11-24 - 1.1.0 — 2021-10-29 - 1.0.0 — 2021-10-28 - 1.0.0-beta.1 — 2021-10-26 - 1.0.0-beta.0 — 2021-10-25 - 1.0.0-alpha.4 — 2021-10-24 - 1.0.0-alpha.3 — 2021-10-23 - 1.0.0-alpha.2 — 2021-10-22 - 1.0.0-alpha.1 — 2021-10-22 - 1.0.0-alpha.0 — 2021-10-22 - 0.36.0 — 2019-01-02 - … 20 more at https://npm.io/package/postcss-markdown/versions ## README # PostCSS Markdown Syntax [![NPM license](https://img.shields.io/npm/l/postcss-markdown.svg)](https://www.npmjs.com/package/postcss-markdown) [![NPM version](https://img.shields.io/npm/v/postcss-markdown.svg?style=flat-square)](https://www.npmjs.com/package/postcss-markdown) [![NPM downloads](https://img.shields.io/npm/dw/postcss-markdown.svg)](http://www.npmtrends.com/postcss-markdown) [![NPM downloads](https://img.shields.io/npm/dm/postcss-markdown.svg)](http://www.npmtrends.com/postcss-markdown) [![NPM downloads](https://img.shields.io/npm/dy/postcss-markdown.svg)](http://www.npmtrends.com/postcss-markdown) [![Build Status](https://github.com/ota-meshi/postcss-markdown/workflows/CI/badge.svg?branch=master)](https://github.com/ota-meshi/postcss-markdown/actions?query=workflow%3ACI) [PostCSS](https://github.com/postcss/postcss) syntax for parsing [Markdown](https://daringfireball.net/projects/markdown/syntax) ## Getting Started First thing's first, install the module: ```bash npm install postcss-markdown --save-dev ``` If you want support SCSS/SASS/LESS/SugarSS syntax, you need to install the corresponding module. - SCSS: [postcss-scss](https://github.com/postcss/postcss-scss) - SASS: [postcss-sass](https://github.com/aleshaoleg/postcss-sass) - LESS: [postcss-less](https://github.com/shellscape/postcss-less) - SugarSS: [sugarss](https://github.com/postcss/sugarss) - Stylus: [postcss-styl](https://github.com/ota-meshi/postcss-styl) This package is written in ESM and requires Node.js `^22.12 || >=24`. CommonJS consumers can still load it with `require("postcss-markdown")` on these Node.js versions (via `require(esm)`). ## Use Cases ```js import postcss from "postcss"; import postcssMarkdown from "postcss-markdown"; import postcssScss from "postcss-scss"; import postcssLess from "postcss-less"; import postcssSafeParser from "postcss-safe-parser"; import autoprefixer from "autoprefixer"; const syntax = postcssMarkdown({ // Enable support for HTML (default: true) htmlInMd: true, // syntax for parse scss (non-required options) scss: postcssScss, // syntax for parse less (non-required options) less: postcssLess, // syntax for parse css blocks (non-required options) css: postcssSafeParser, }); postcss([autoprefixer]) .process(source, { syntax: syntax }) .then(function (result) { // An alias for the result.css property. Use it with syntaxes that generate non-CSS output. result.content; }); ``` input: 
# title

```css
::placeholder {
    color: gray;
}
```
output: 
# title

```css
::-moz-placeholder {
    color: gray;
}
:-ms-input-placeholder {
    color: gray;
}
::placeholder {
    color: gray;
}
```
If you want support SCSS/SASS/LESS/SugarSS syntax, you need to install these module: - SCSS: [postcss-scss](https://github.com/postcss/postcss-scss) - SASS: [postcss-sass](https://github.com/aleshaoleg/postcss-sass) - LESS: [postcss-less](https://github.com/shellscape/postcss-less) - SugarSS: [sugarss](https://github.com/postcss/sugarss) - Stylus: [postcss-styl](https://github.com/ota-meshi/postcss-styl) ## Advanced Use Cases ### Options ```js import { createRequire } from "module"; import postcssMarkdown from "postcss-markdown"; import postcssSass from "postcss-sass"; import sugarss from "sugarss"; import postcssCustomSyntax from "postcss-custom-syntax"; const options = { rules: [ { // custom language test: /^postcss$/i, lang: "scss", }, { // custom language test: /^customcss$/i, lang: "custom", }, ], // custom parser for CSS (using `postcss-safe-parser`) css: "postcss-safe-parser", // custom parser for SASS (PostCSS-compatible syntax.) sass: postcssSass, // custom parser for SCSS (by module name) scss: "postcss-scss", // custom parser for LESS (by module path) less: createRequire(import.meta.url).resolve("postcss-less"), // custom parser for SugarSS sugarss: sugarss, // custom parser for custom language custom: postcssCustomSyntax, }; const syntax = postcssMarkdown(options); ``` ## Turning PostCSS off from within your Markdown PostCSS can be temporarily turned off by using special comments in your Markdown. For example: 
<!-- postcss-ignore -->
```css
a {
    color: red;
}
```
## Linting with Stylelint The main use case of this plugin is to apply linting with [Stylelint] to CSS (and CSS-like) code blocks in markdown file. You can use it by configuring your `stylelint` config as follows: ```json { "overrides": [ { "files": ["*.md", "**/*.md"], "customSyntax": "postcss-markdown" } ] } ``` [stylelint]: https://stylelint.io/ ### Editor integrations #### Visual Studio Code Use the [stylelint.vscode-stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) extension that [Stylelint] provides officially. You have to configure the `stylelint.validate` option of the extension to check `.md` files, because the extension does not check the `*.md` file by default. Example **.vscode/settings.json**: ```jsonc { "stylelint.validate": [ ..., // ↓ Add "markdown" language. "markdown" ] ``` --- _Source: https://npm.io/package/postcss-markdown · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._