Skip to content

markdown-preferences/padded-custom-containers

disallow or require padding inside custom containers

  • ⚙️ This rule is included in plugin.configs.standard.
  • 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

📖 Rule Details

This rule checks whether there are blank lines (padding) immediately after the opening ::: and before the next content, and immediately before the closing ::: and after the previous content in custom containers. By default, blank lines (padding) at these positions are not allowed (padding is disallowed).

Note: Custom containers are non-standard Markdown syntax. To use this rule with these extended syntaxes, you need to configure the "markdown-preferences/extended-syntax" language option in your ESLint configuration.

md
<!-- eslint markdown-preferences/padded-custom-containers: 'error' -->

<!-- ✓ GOOD -->
::: info
content
:::

::: info
# Heading

- list
:::

<!-- ✗ BAD -->
::: info
content
::: ::: info
# Heading - list
:::

🔧 Options

By default, blank lines (padding) are disallowed ({ padding: "never" }). You can require blank lines by setting { padding: "always" }.

json
{
  "markdown-preferences/padded-custom-containers": [
    "error",
    {
      "padding": "never",
      "overrides": [
        {
          "info": "/^code-group\\b/u",
          "padding": "always"
        }
      ]
    }
  ]
}
  • padding: Specify whether blank lines (padding) are required or disallowed before and after the content inside custom containers.
    • "never" (default): Disallow blank lines before and after the content inside custom containers.
    • "always": Require blank lines before and after the content inside custom containers.
  • overrides: Specify different padding rules for specific custom container types. Each override object can contain:
    • info: A string or array of strings matching the container info text (supports regular expressions).
    • padding: The padding setting for containers matching the info pattern ("always" or "never").

Override Examples

You can specify different padding rules for different container types:

md
<!-- eslint markdown-preferences/padded-custom-containers: ["error", { "padding": "never", "overrides": [{ "info": "/^code-group\\b/u", "padding": "always" }] }] -->

<!-- ✓ GOOD -->

::: info
This is an info box.
:::

::: code-group

```js [config.js]
export default {/* ... */}
```

```ts [config.ts]
const config: UserConfig = {
  // ...
}
export default config
```

:::

<!-- ✗ BAD -->

::: info
This is an info box.
:::
::: code-group
```js [config.js] export default {/* ... */} ``` ```ts [config.ts] const config: UserConfig = { // ... } export default config ```
:::

Configuration for Extended Syntax

To check custom containers (which are non-standard Markdown syntax), you need to configure the "markdown-preferences/extended-syntax" language option:

js
// eslint.config.js
import { defineConfig } from "eslint/config";
import markdownPreferences from "eslint-plugin-markdown-preferences";

export default defineConfig([
  {
    extends: [markdownPreferences.configs.recommended],
    language: "markdown-preferences/extended-syntax",
    rules: {
      "markdown-preferences/padded-custom-containers": "error",
    },
  },
]);

📚 Further Reading

🚀 Version

This rule was introduced in eslint-plugin-markdown-preferences v0.29.0

🔍 Implementation