SHIP IT FASTER

The average enterprise on Netlify ships 140 times per week. Where does your team rank?

ContactSign Up
Community Plugin
View plugin on GitHub

Description

This plugin uses shiki to add code highlighting to pages that are built with gatsby-transformer-remark.

How to install

npm install gatsby-remark-shiki

When do I use this plugin?

You need it to highlight code blocks (```) in your markdown files. You can use many popular themes that are available in IDEs like VSCode, e.g. Nord.

Examples of usage

Simple

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-shiki`,
          options: {
            theme: 'nord', // Default
          },
        },
      ],
    },
  },
];

Add your own TextMate language

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-shiki`,
          options: {
            langs: [
              {
                id: `wowlang`,
                scopeName: `source.wowlang`,
                path: cwd_join(`langs/wowlang.tmLanguage.json`),
              },
            ],
          },
        },
      ],
    },
  },
];

How to contribute

Feel free to file an issue here: https://github.com/jlkiri/gatsby-remark-shiki/issues

© 2023 Gatsby, Inc.