Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


Transform equivalent code blocks in Gatsby markdown files into a selector.

Example in the API Platform website:

Example in the API Platform website


  • gatsby-transformer-remark
  • gatsby-remark-prismjs


  • Selecting a language in a selector select the language for all the selectors in the page as well, if the language is available for them.
  • The chosen language is kept in the local storage: if the page is refreshed or if another page is loaded, the language will be selected for all the selectors.

How to install

Add the plugin to your project:

npm install --save gatsby-remark-code-selector

Configure the plugin:

// gatsby-config.js
module.exports = {
  plugins: [
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          // gatsby-remark-prismjs must go
          // before gatsby-remark-code-selector

Restart Gatsby.

How to use

In your markdown files:

use ApiPlatform\Core\Annotation\ApiResource;

 * @ApiResource(itemOperations={"get"})
class Book

        get: ~

<?xml version="1.0" encoding="UTF-8" ?>
<resources xmlns="https://api-platform.com/schema/metadata"
    <resource class="App\Entity\Book">
            <itemOperation name="get" />

The code selector is not stylized by default. You can add your own CSS by using the following class names:

  • code-selector for the whole selector
  • code-selector-toolbar for the container of the select buttons
  • code-selector-select-php for a particular button
  • code-selector-code-php for a particular code block
© 2023 Gatsby, Inc.