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