Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

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

© 2024 Gatsby, Inc.