View on GitHub


Test Coverage
hide_title: true
title: 'CodeMirrorExtension'

import Basic from '../../website/extension-examples/extension-codemirror6/basic';
import WithCustomExtension from '../../website/extension-examples/extension-codemirror6/with-custom-extension';

# `CodeMirrorExtension`

## Summary

The CodeMirror extension adds fenced code blocks to your editor powered by [CodeMirror 6]( A code block contains a formatted snippets of source code.


This extension differs from the `CodeExtension`, which provides code marks on inline text.



Also check a simpler code block implementation at [`CodeBlockExtension`](code-block-extension).


## Features

### Keyboard support

Users can create a new code block by typing <code>&grave;&grave;&grave;&nbsp;</code> (3 ticks and a space). Users can define the language of the code block by typing <code>&grave;&grave;&grave;html&nbsp;</code>.

## Usage

### Installation

This extension is NOT installed for you when you install the main `remirror` package but need to be installed separately:

npm install @remirror/extension-codemirror6

You will probably also want to install some basic CodeMirror packages:

npm install @codemirror/basic-setup @codemirror/language-data @codemirror/theme-one-dark

You can use the imports in the following way:

import { basicSetup } from '@codemirror/basic-setup';
import { languages } from '@codemirror/language-data';
import { oneDark } from '@codemirror/theme-one-dark';
import { CodeMirrorExtension } from '@remirror/extension-codemirror6';

const codeMirrorExtension = new CodeMirrorExtension({
  languages: languages,
  extensions: [basicSetup, oneDark],

### Examples

<Basic />

You can customize your CodeMirror editor by passing your custom extensions.

<WithCustomExtension />

## API

- [CodeMirrorExtension](../api/extension-codemirror6)