npmpackage.info

Gathering detailed insights and metrics for postcss-markdown

postcss-markdown

PostCSS Syntax for parsing Markdown

1.3.0

MIT

JavaScript

35.94 kB

177,093,825 3.8

Installations

npm install postcss-markdown

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Min. Node Version

^12 || >=14

Node Version

20.18.1

NPM Version

10.8.2 Score

97.4

Supply Chain

98.2

Quality

81.7

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

10

Total

85

Closed

15

Merged

60

Issues

Open

0

Total

2

Closed

2

Releases

v1.3.0

Updated on Jan 14, 2025

v1.2.0

Updated on Nov 24, 2021

v1.1.0

Updated on Oct 29, 2021

v1.0.0

Updated on Oct 28, 2021

View All 4 releases

Languages

JavaScript

JavaScript (100%)

Developer

ota-meshi

Download Statistics

Total Downloads

177,093,825

Last Day

42,443

Last Week

228,812

Last Month

1,000,309

Last Year

11,975,445

GitHub Statistics

MIT License

4 Stars

116 Commits

3 Watchers

12 Branches

7 Contributors

Updated on Apr 20, 2025

Bundle Size

120.41 kB

Minified

35.94 kB

Minified + Gzipped

Bundlephobia

Maintainers

View All 7 Contributors

Package Meta Information

Latest Version

1.3.0

Package Id

postcss-markdown@1.3.0

Unpacked Size

29.48 kB

Size

9.39 kB

File Count

NPM Version

10.8.2

Node Version

20.18.1

Published on

Jan 14, 2025

Total Downloads

Cumulative downloads

Total Downloads

177,093,825

Last Day

45.3%

42,443

Compared to previous day

Last Week

3.6%

228,812

Compared to previous week

Last Month

-3%

1,000,309

Compared to previous month

Last Year

-25.8%

11,975,445

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

PostCSS Markdown Syntax

PostCSS syntax for parsing Markdown

Getting Started

First thing's first, install the module:

1npm install 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
Stylus: postcss-styl

Use Cases

1const postcss = require("postcss");
2const syntax = require("postcss-markdown")({
3    // Enable support for HTML (default: true)
4    htmlInMd: true,
5    // syntax for parse scss (non-required options)
6    scss: require("postcss-scss"),
7    // syntax for parse less (non-required options)
8    less: require("postcss-less"),
9    // syntax for parse css blocks (non-required options)
10    css: require("postcss-safe-parser"),
11});
12const autoprefixer = require("autoprefixer");
13postcss([autoprefixer])
14    .process(source, { syntax: syntax })
15    .then(function (result) {
16        // An alias for the result.css property. Use it with syntaxes that generate non-CSS output.
17        result.content;
18    });

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
SASS: postcss-sass
LESS: postcss-less
SugarSS: sugarss
Stylus: postcss-styl

Advanced Use Cases

Options

1const options = {
2    rules: [
3        {
4            // custom language
5            test: /^postcss$/i,
6            lang: "scss",
7        },
8        {
9            // custom language
10            test: /^customcss$/i,
11            lang: "custom",
12        },
13    ],
14
15    // custom parser for CSS (using `postcss-safe-parser`)
16    css: "postcss-safe-parser",
17    // custom parser for SASS (PostCSS-compatible syntax.)
18    sass: require("postcss-sass"),
19    // custom parser for SCSS (by module name)
20    scss: "postcss-scss",
21    // custom parser for LESS (by module path)
22    less: require.resolve("./node_modules/postcss-less"),
23    // custom parser for SugarSS
24    sugarss: require("sugarss"),
25    // custom parser for custom language
26    custom: require("postcss-custom-syntax"),
27};
28const syntax = require("postcss-markdown")(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:

1{
2    "overrides": [
3        {
4            "files": ["*.md", "**/*.md"],
5            "customSyntax": "postcss-markdown"
6        }
7    ]
8}

Editor integrations

Visual Studio Code

Use the 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:

1{
2  "stylelint.validate": [
3      ...,
4      // ↓ Add "markdown" language.
5      "markdown"
6  ]

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/NodeCI.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/ota-meshi/postcss-markdown/NodeCI.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/NodeCI.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/ota-meshi/postcss-markdown/NodeCI.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/NodeCI.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/ota-meshi/postcss-markdown/NodeCI.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/NodeCI.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/ota-meshi/postcss-markdown/NodeCI.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/NpmPublish.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/ota-meshi/postcss-markdown/NpmPublish.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/NpmPublish.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/ota-meshi/postcss-markdown/NpmPublish.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/format.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/ota-meshi/postcss-markdown/format.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/format.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/ota-meshi/postcss-markdown/format.yml/master?enable=pin
Warn: npmCommand not pinned by hash: .github/workflows/NodeCI.yml:19
Warn: npmCommand not pinned by hash: .github/workflows/NodeCI.yml:34
Warn: npmCommand not pinned by hash: .github/workflows/NpmPublish.yml:19
Warn: npmCommand not pinned by hash: .github/workflows/format.yml:17
Info: 0 out of 8 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 4 npmCommand dependencies pinned

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

Score

3.8

/10

Last Scanned on 2025-04-28

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to postcss-markdown

Other packages similar to postcss-markdown

postcss-markdown

Installations

Developer Guide

No

CommonJS

^12 || >=14

20.18.1

10.8.2

Score

Pull Requests

10

85

15

60

Issues

0

2

2

Releases

Languages

Developer

ota-meshi

Download Statistics

GitHub Statistics

Bundle Size

120.41 kB

35.94 kB

Maintainers

Package Meta Information

Total Downloads

177,093,825

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Dev Dependencies

PostCSS Markdown Syntax

Getting Started

Use Cases

Advanced Use Cases

Options

Turning PostCSS off from within your Markdown

Linting with Stylelint

Editor integrations

Visual Studio Code

10

10

10

10

10

0

0

0

0

0

0

0

0

0

3.8

/10