gatsby-remark-prettier

1.0.0 verified Sat Apr 25 auth: no javascript

A Gatsby remark plugin that formats code blocks in Markdown files using Prettier. Version 1.0.0 is stable but relies on older Gatsby (^1.9.273) and Prettier (^1.13.7) peer dependencies. It integrates with gatsby-transformer-remark and can be configured to use a local .prettierrc file or override options. Unlike manual formatting, it automates code block styling within Gatsby's build pipeline. No longer actively developed.

Common errors

error Error: Cannot find module 'gatsby-remark-prettier' ↓

cause Plugin not installed or missing in node_modules.

fix

npm install gatsby-remark-prettier

error Warning: unknown plugin "gatsby-remark-prettier" ↓

cause Plugin added to top-level plugins array instead of under gatsby-transformer-remark.

fix

Move it to the plugins array inside gatsby-transformer-remark options.

error ReferenceError: prettier is not defined ↓

cause prettier peer dependency not installed.

fix

npm install prettier@^1.13.7

Warnings

breaking Requires gatsby@^1.9.273 and prettier@^1.13.7. Not compatible with Gatsby v2+ or prettier v2+. ↓

fix Check peer dependency versions; if using newer Gatsby, look for alternatives or fork.

gotcha Order matters: gatsby-remark-prettier should be placed before any syntax highlighting plugins like gatsby-remark-prismjs to avoid conflicts. ↓

fix Place prettier plugin before highlight plugins in the plugins array.

gotcha The `usePrettierrc` option resolves config relative to process.cwd(), which may not be the project root in some Gatsby setups. ↓

fix Set `usePrettierrc: false` and specify all options in `prettierOptions` if issues arise.

Install

npm install gatsby-remark-prettier

yarn add gatsby-remark-prettier

pnpm add gatsby-remark-prettier

Imports

gatsby-remark-prettier
wrong
```
plugins: ['gatsby-remark-prettier']
```
correct
```
{
  resolve: `gatsby-remark-prettier`,
  options: {}
}
```
Must be used as a plugin in gatsby-config.js under gatsby-transformer-remark's plugins array, not as a top-level plugin.

options.usePrettierrc

wrong

options: { usePrettierrc: 'true' }

correct

options: { usePrettierrc: true }

Boolean, not string. Defaults to true.

options.prettierOptions

wrong

options: { prettierOptions: { singleQuote: true } } (valid but depends on preference)

correct

options: { prettierOptions: { semi: false } }

Accepts Prettier options object. Overrides .prettierrc if usePrettierrc is true.

Quickstart

Configures gatsby-remark-prettier to format code blocks, using .prettierrc and overriding some options, with a highlight plugin after it.

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-prettier`,
            options: {
              usePrettierrc: true,
              prettierOptions: {
                semi: false,
                singleQuote: true
              }
            }
          },
          `gatsby-remark-prismjs`
        ]
      }
    }
  ]
}