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.

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

// 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"
          }
        }
      ]
    }
  }
];

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

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) {
  }
}
```