Skip to content

markdown-preferences/code-fence-style

enforce a consistent code fence style (backtick or tilde) in Markdown fenced code blocks.

  • ⚙️ 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 enforces a consistent style for code fences (fenced code blocks) in Markdown.
Markdown allows both backtick (```) and tilde (~~~) code fences, but mixing them can reduce readability and maintainability.
This rule detects code fences that do not match the specified style (default: backtick) and reports them. It can also automatically fix them if desired.

Why enforce a consistent style?

  • Ensures a unified look and editing experience across the project
  • Prevents rendering or parsing issues
  • Makes collaboration and integration with other tools easier

About autofix

  • The type of fence (backtick/tilde) can be unified automatically
  • The length of the fence (3 or more characters) and the language specifier are not changed
md
<!-- eslint markdown-preferences/code-fence-style: 'error' -->

<!-- ✓ GOOD (when "backtick" is specified) -->
```js
console.log("hello");
```

<!-- ✓ GOOD (when "tilde" is specified) -->
~~~
js
console.log("hello"); ~~~ <!-- ✓ Ignore (conflict with content if converted) --> ~~~js ```md ``` ~~~

🔧 Options

json
{
  "markdown-preferences/code-fence-style": [
    "error",
    {
      "style": "backtick" // "backtick" (default) or "tilde"
    }
  ]
}
  • "backtick": Only backtick (```) fences are allowed
  • "tilde": Only tilde (~~~) fences are allowed

📚 Further Reading

🚀 Version

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

🔍 Implementation