Code

Overview

The Code plugin provides syntax-highlighted code blocks powered by Shiki. It supports multiple programming languages and themes, making it perfect for technical documentation and tutorials.

Installation

npm install @yoopta/code

Basic Usage

Pass the plugin to createYooptaEditor; do not pass plugins to <YooptaEditor>.

import { useMemo } from 'react';
import YooptaEditor, { createYooptaEditor } from '@yoopta/editor';
import Code from '@yoopta/code';

const plugins = [Code];

export default function Editor() {
  const editor = useMemo(() => createYooptaEditor({ plugins, marks: [] }), []);
  return <YooptaEditor editor={editor} onChange={() => {}} />;
}

Features

Syntax Highlighting: Powered by Shiki with accurate highlighting
200+ Languages: Support for all major programming languages
Multiple Themes: Choose from various color themes
Code Copying: Easy code copying functionality
Line Numbers: Optional line number display
Keyboard Shortcuts: Type ```, code, or js to insert

Configuration

import { Code } from '@yoopta/code';

const plugins = [
  Code.extend({
    options: {
      theme: 'github-dark',
      language: 'typescript',
    },
  }),
];

Options

string

default:"github-dark"

Shiki theme for syntax highlighting. Popular options: - github-dark - github-light - dracula

monokai - nord - tokyo-night

string

default:"javascript"

Default programming language. Supported languages include: - JavaScript, TypeScript - Python, Java, C++, Go, Rust - HTML, CSS, SCSS - JSON, YAML, XML - And 190+ more

object

Show properties

string

default:"Code"

Display title in UI

string

Description shown in menus

string[]

default:"['```', 'code', 'js']"

Keyboard shortcuts to trigger the plugin

Element Props

Each code block has the following properties:

string

default:"javascript"

Programming language for syntax highlighting

string

default:"github-dark"

Color theme for the code block

Commands

Use the Blocks namespace for block type changes and CodeCommands (or Elements.updateElement) for code element props:

import { Blocks } from '@yoopta/editor';
import { CodeCommands } from '@yoopta/code';

// Transform current block to a Code block
Blocks.toggleBlock(editor, 'Code', { preserveContent: true });

// Update language / theme (recommended — keeps Slate structure valid)
CodeCommands.updateCodeLanguage(editor, blockId, 'python');
CodeCommands.updateCodeTheme(editor, blockId, 'dracula');

Custom Rendering

import { Code } from '@yoopta/code';

const CustomCode = Code.extend({
  elements: {
    code: {
      render: (props) => {
        const { language, theme } = props.element.props;

        return (
          <div className="code-block">
            <div className="code-header">
              <span>{language}</span>
            </div>
            <pre {...props.attributes} data-language={language} data-theme={theme}>
              {props.children}
            </pre>
          </div>
        );
      },
    },
  },
});

Keyboard Behavior

The Code plugin has special keyboard handling:

Enter: Inserts a newline within the code block (not a new block)
Shift+Enter: Also inserts a newline
Tab: Inserts tab character (doesn’t switch focus)

Parsers

HTML Serialization

<pre data-theme="github-dark" data-language="javascript">
  <code>console.log("Hello World");</code>
</pre>

Markdown Serialization

```javascript
console.log('Hello World');
```

Email Serialization

The plugin provides email-compatible HTML with inline styles for proper rendering in email clients.

Extending the Plugin

Custom Theme

const CustomCode = Code.extend({
  elements: {
    code: {
      props: {
        theme: 'nord',
        language: 'typescript',
      },
    },
  },
});

With Line Numbers

const CustomCode = Code.extend({
  elements: {
    code: {
      render: (props) => {
        const code = props.element.children[0]?.text || '';
        const lines = code.split('\n');

        return (
          <div className="code-with-line-numbers">
            <div className="line-numbers">
              {lines.map((_, i) => (
                <div key={i}>{i + 1}</div>
              ))}
            </div>
            <pre {...props.attributes}>{props.children}</pre>
          </div>
        );
      },
    },
  },
});

Use Cases

Documentation

Technical documentation with code examples

Tutorials

Step-by-step coding tutorials

API Reference

API endpoints and code samples

Blog Posts

Technical blog posts with code snippets

Best Practices

Choose Appropriate Theme

Select a theme that matches your site’s design and provides good contrast

Specify Language

Always specify the language for accurate syntax highlighting

Keep Code Concise

Break long code examples into smaller, focused snippets

Add Comments

Include comments in code to explain complex logic

CodeGroup Plugin - For tabbed code blocks
Paragraph Plugin - For text content

Getting Started

Core Concepts

Available Plugins

Marks

UI Components

API Reference

Overview

Installation

Basic Usage

Features

Configuration

Options

Element Props

Commands

Custom Rendering

Keyboard Behavior

Parsers

HTML Serialization

Markdown Serialization

Email Serialization

Extending the Plugin

Custom Theme

With Line Numbers

Use Cases

Documentation

Tutorials

API Reference

Blog Posts

Best Practices

​Overview

​Installation

​Basic Usage

​Features

​Configuration

​Options

​Element Props

​Commands

​Custom Rendering

​Keyboard Behavior

​Parsers

​HTML Serialization

​Markdown Serialization

​Email Serialization

​Extending the Plugin

​Custom Theme

​With Line Numbers

​Use Cases

Documentation

Tutorials

API Reference

Blog Posts

​Best Practices

​Related Plugins

Overview

Installation

Basic Usage

Features

Configuration

Options

Element Props

Commands

Custom Rendering

Keyboard Behavior

Parsers

HTML Serialization

Markdown Serialization

Email Serialization

Extending the Plugin

Custom Theme

With Line Numbers

Use Cases

Best Practices

Related Plugins