@stylelint/postcss-markdown

PostCSS Markdown Syntax

PostCSS Syntax for parsing Markdown

Getting Started

First thing's first, install the module:

npm install postcss-syntax postcss-markdown --save-dev

If you want support SCSS/SASS/LESS/SugarSS syntax, you need to install the corresponding module.

• SCSS: postcss-scss
• SASS: postcss-sass
• LESS: postcss-less
• SugarSS: sugarss

Use Cases

var syntax = require("postcss-syntax")({
  // Enable support for HTML (default: true) See: https://github.com/gucong3000/postcss-html
  htmlInMd: true,
  // syntax for parse scss (non-required options)
  scss: require("postcss-scss"),
  // syntax for parse less (non-required options)
  less: require("postcss-less"),
  // syntax for parse css blocks (non-required options)
  css: require("postcss-safe-parser")
});
var autoprefixer = require("autoprefixer");
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
::-webkit-input-placeholder {
	color: gray;
}
:-ms-input-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
• SASS: postcss-sass
• LESS: postcss-less
• SugarSS: sugarss

Advanced Use Cases

See: postcss-syntax

Style Transformations

The main use case of this plugin is apply PostCSS transformations to CSS (and CSS-like) code blocks in markdown file.

Similar packages

Other packages similar to @stylelint/postcss-markdown

stylelint-processor-markdown

stylelint-processor-markdown is another Stylelint processor that allows you to lint CSS within Markdown files. It works similarly to @stylelint/postcss-markdown but is a separate package. Both packages serve the same purpose, but @stylelint/postcss-markdown is more integrated with the PostCSS ecosystem.

remark-lint

remark-lint is a plugin for remark, a Markdown processor, that provides linting for Markdown files. While it doesn't specifically target CSS within Markdown, it can be extended with plugins to achieve similar functionality. It is more focused on the Markdown content itself rather than the embedded CSS.