Real World Performance: lazy loading, optimizing media, faster analytics join us Wednesday

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=""
    <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.