Skip to main content



The CodeBlock extension adds fenced code blocks to your editor. 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 more powerful code block implementation at CodeMirrorExtension.



Code blocks can be formatted for many different languages. For example, JavaScript code will be formatted differently from markdown or JSON code.

For a list of supported languages, please consult refractor, which we use under the hood.

Keyboard support

Users can create a new code block by typing ```  (3 ticks and a space). Users can define the language of the code block by typing ```html .



This extension is installed for you when you install the main remirror package.

You can use the imports in the following way:

import { CodeBlockExtension } from 'remirror/extensions';


Source code
import React from 'react';
import css from 'refractor/lang/css.js';
import javascript from 'refractor/lang/javascript.js';
import json from 'refractor/lang/json.js';
import markdown from 'refractor/lang/markdown.js';
import typescript from 'refractor/lang/typescript.js';
import { CodeBlockExtension } from 'remirror/extensions';
import { Remirror, ThemeProvider, useRemirror } from '@remirror/react';

const extensions = () => [
new CodeBlockExtension({
supportedLanguages: [css, javascript, json, markdown, typescript],

const content = `
<pre><code data-code-block-language="typescript">function sayHello {
console.log('Hello world, TypeScript!')
<pre><code data-code-block-language="markdown">Hello _world_, **Markdown**</code></pre>
<pre><code data-code-block-language="css">.hello-world-css {
color: red;
<pre><code data-code-block-language="json">{
"hello-world": "JSON"

const Basic = (): JSX.Element => {
const { manager, state } = useRemirror({ extensions, content, stringHandler: 'html' });

return (
<Remirror manager={manager} initialContent={state} autoRender />

export default Basic;