Skip to content
ProseKit
GitHubDiscord

CodeBlock

The codeBlock node is designed to represent blocks of code within your document.

 
import 'prosekit/basic/style.css'
import 'prosekit/basic/typography.css'

import { createEditor } from 'prosekit/core'
import { ProseKit } from 'prosekit/react'
import { useMemo } from 'react'

import { defaultContent } from '../../sample/sample-doc-code-block'
import { Toolbar } from '../../ui/toolbar'

import { defineExtension } from './extension'

export default function Editor() {
  const editor = useMemo(() => {
    const extension = defineExtension()
    return createEditor({ extension, defaultContent })
  }, [])

  return (
    <ProseKit editor={editor}>
      <div className="box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white">
        <Toolbar />
        <div className="relative w-full flex-1 box-border overflow-y-auto">
          <div ref={editor.mount} className="ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500"></div>
        </div>
      </div>
    </ProseKit>
  )
}

Usage

Section titled “Usage”
import { defineCodeBlockfunction defineCodeBlock(): CodeBlockExtension
Adds `codeBlock` nodes to the editor. This includes the following extensions:

- 
{@link 
defineCodeBlockSpec
}

- 
{@link 
defineCodeBlockInputRule
}

- 
{@link 
defineCodeBlockEnterRule
}

- 
{@link 
defineCodeBlockKeymap
}

- 
{@link 
defineCodeBlockCommands
}
.
@public
 } from 'prosekit/extensions/code-block'

const extensionconst extension: CodeBlockExtension = defineCodeBlockfunction defineCodeBlock(): CodeBlockExtension
Adds `codeBlock` nodes to the editor. This includes the following extensions:

- 
{@link 
defineCodeBlockSpec
}

- 
{@link 
defineCodeBlockInputRule
}

- 
{@link 
defineCodeBlockEnterRule
}

- 
{@link 
defineCodeBlockKeymap
}

- 
{@link 
defineCodeBlockCommands
}
.
@public
()

Commands

Section titled “Commands”

setCodeBlock

Section titled “setCodeBlock”

Set the selected node to a codeBlock node.

editorconst editor: Editor<CodeBlockExtension>.commands
Editor<CodeBlockExtension>.commands: ToCommandAction<{
    setCodeBlock: [attrs?: CodeBlockAttrs];
    insertCodeBlock: [attrs?: CodeBlockAttrs];
    toggleCodeBlock: [attrs?: CodeBlockAttrs];
    setCodeBlockAttrs: [attrs: CodeBlockAttrs];
}>
All 
{@link 
CommandAction
}
s defined by the editor.
.setCodeBlock
setCodeBlock: CommandAction
(attrs?: CodeBlockAttrs | undefined) => boolean
Execute the current command. Return `true` if the command was successfully
executed, otherwise `false`.
()

insertCodeBlock

Section titled “insertCodeBlock”

Insert a new codeBlock node.

editorconst editor: Editor<CodeBlockExtension>.commands
Editor<CodeBlockExtension>.commands: ToCommandAction<{
    setCodeBlock: [attrs?: CodeBlockAttrs];
    insertCodeBlock: [attrs?: CodeBlockAttrs];
    toggleCodeBlock: [attrs?: CodeBlockAttrs];
    setCodeBlockAttrs: [attrs: CodeBlockAttrs];
}>
All 
{@link 
CommandAction
}
s defined by the editor.
.insertCodeBlock
insertCodeBlock: CommandAction
(attrs?: CodeBlockAttrs | undefined) => boolean
Execute the current command. Return `true` if the command was successfully
executed, otherwise `false`.
()

toggleCodeBlock

Section titled “toggleCodeBlock”

Toggle the selected node between a codeBlock node and a default node (e.g., a paragraph node).

editorconst editor: Editor<CodeBlockExtension>.commands
Editor<CodeBlockExtension>.commands: ToCommandAction<{
    setCodeBlock: [attrs?: CodeBlockAttrs];
    insertCodeBlock: [attrs?: CodeBlockAttrs];
    toggleCodeBlock: [attrs?: CodeBlockAttrs];
    setCodeBlockAttrs: [attrs: CodeBlockAttrs];
}>
All 
{@link 
CommandAction
}
s defined by the editor.
.toggleCodeBlock
toggleCodeBlock: CommandAction
(attrs?: CodeBlockAttrs | undefined) => boolean
Execute the current command. Return `true` if the command was successfully
executed, otherwise `false`.
()

setCodeBlockAttrs

Section titled “setCodeBlockAttrs”

Set the attributes of the selected codeBlock node.

editorconst editor: Editor<CodeBlockExtension>.commands
Editor<CodeBlockExtension>.commands: ToCommandAction<{
    setCodeBlock: [attrs?: CodeBlockAttrs];
    insertCodeBlock: [attrs?: CodeBlockAttrs];
    toggleCodeBlock: [attrs?: CodeBlockAttrs];
    setCodeBlockAttrs: [attrs: CodeBlockAttrs];
}>
All 
{@link 
CommandAction
}
s defined by the editor.
.setCodeBlockAttrs
setCodeBlockAttrs: CommandAction
(attrs: CodeBlockAttrs) => boolean
Execute the current command. Return `true` if the command was successfully
executed, otherwise `false`.
({ languageCodeBlockAttrs.language: string: 'javascript' })

Keyboard Interaction

Section titled “Keyboard Interaction”

Input ``` followed by an optional language name and press Enter or Space to create a new codeBlock node.

Press Enter three times at the end of or press Shift-Enter to exit the current codeBlock node.

Syntax Highlighting

Section titled “Syntax Highlighting”

You can use defineCodeBlockShiki to enable syntax highlighting for the codeBlock node using the Shiki library. defineCodeBlockShiki will only load used languages and themes asynchronously, which is useful for reducing the initial bundle size of your application.

import { defineCodeBlockShikifunction defineCodeBlockShiki({ themes, langs, ...rest }?: CodeBlockShikiOptions): Extension
Adds syntax highlighting to code blocks using the [Shiki](https://github.com/shikijs/shiki) package.

It will set two CSS variables on the code block elements:

- `--prosemirror-highlight`: sets text color
- `--prosemirror-highlight-bg`: sets background color
@paramoptions - The options to configure the Shiki highlighter.@public
 } from 'prosekit/extensions/code-block'

const extensionconst extension: Extension<ExtensionTyping<any, any, any>> = defineCodeBlockShikifunction defineCodeBlockShiki({ themes, langs, ...rest }?: CodeBlockShikiOptions): Extension
Adds syntax highlighting to code blocks using the [Shiki](https://github.com/shikijs/shiki) package.

It will set two CSS variables on the code block elements:

- `--prosemirror-highlight`: sets text color
- `--prosemirror-highlight-bg`: sets background color
@paramoptions - The options to configure the Shiki highlighter.@public
({ themesCodeBlockShikiOptions.themes?: BundledTheme[] | undefined
A list of Shiki themes to pre-load. The first theme in the list will be
used to render the code block.
@default['one-dark-pro']
: ['github-light'] })

If you want to use a different syntax highlighter or have more control over the syntax highlighting, you can use the defineCodeBlockHighlight function to create an extension. This function accepts a parser object, defined by the prosemirror-highlight library. For more details on how to use the other syntax highlighters, refer to the prosemirror-highlight documentation.

import { defineCodeBlockHighlightfunction defineCodeBlockHighlight({ parser, }: CodeBlockHighlightOptions): Extension
Adds syntax highlighting to code blocks. This function requires a `Parser`
instance from the `prosemirror-highlight` package. See the
[documentation](https://github.com/ocavue/prosemirror-highlight) for more
information.
@paramoptions@public
 } from 'prosekit/extensions/code-block'
import { parserconst parser: Parser } from './my-prosemirror-highlight-parser'

const extensionconst extension: Extension<ExtensionTyping<any, any, any>> = defineCodeBlockHighlightfunction defineCodeBlockHighlight({ parser, }: CodeBlockHighlightOptions): Extension
Adds syntax highlighting to code blocks. This function requires a `Parser`
instance from the `prosemirror-highlight` package. See the
[documentation](https://github.com/ocavue/prosemirror-highlight) for more
information.
@paramoptions@public
({ parserparser: Parser })

API Reference

Section titled “API Reference”