Community Plugin

gatsby-remark-codemirror

Adds syntax highlighting to code blocks in your Gatsby Markdown files using CodeMirror Mode Runner. Note that this Remark plugin does not convert your code blocks to code editor instances, only uses CodeMirror’s syntax highlighting engine to render static <code><pre>...</code></pre> blocks with appropriate CSS classes for <span/> tags contained within.

Install

npm install --save gatsby-transformer-remark gatsby-remark-codemirror

How to use

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-codemirror`,
          options: {
            // CSS class suffix to be used for produced `<pre/>` blocks.
            // Default value is "default", which adds "cm-s-default" class.
            // This class name matches
            theme: "default"
          }
        }
      ]
    }
  }
];

Include CSS

Required: Pick a CodeMirror theme or create your own

CodeMirror ships with a number of themes (previewable on the CodeMirror website) that you can easily include in your Gatsby site, or you can build your own by copying and modifying an example.

To load a theme, just require its CSS file in your gatsby-browser.js file, e.g.

// gatsby-browser.js
require("codemirror/lib/codemirror.css");

or for a non-default theme:

// gatsby-browser.js
require("codemirror/theme/ambiance.css");
// don't forget to set `theme: "ambiance"` in gatsby-config.js

Usage in Markdown

This is some beautiful code:

```swift
extension Never: Equatable {
  public static func == (lhs: Never, rhs: Never) -> Bool {
    switch (lhs, rhs) {
    }
  }
}

extension Never: Hashable {
  public func hash(into hasher: inout Hasher) {
  }
}
```