Skip to main content

​
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

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

const plugins = [
  Code,
  // ... other plugins
];

<YooptaEditor editor={editor} plugins={plugins} />;

​
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

​
theme
string
default:"github-dark"
Shiki theme for syntax highlighting. Popular options: - github-dark - github-light - dracula
  • monokai - nord - tokyo-night
​
language
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
​
display
object
​
shortcuts
string[]
default:"['```', 'code', 'js']"
Keyboard shortcuts to trigger the plugin

​
Element Props

Each code block has the following properties:
​
language
string
default:"javascript"
Programming language for syntax highlighting
​
theme
string
default:"github-dark"
Color theme for the code block

​
Commands

Access code commands via editor.blocks: 
// Transform current block to code
editor.blocks.toggle({ type: 'Code' });

// Update code language
editor.blocks.updateBlock(blockId, {
  props: { language: 'python' },
});

// Update code theme
editor.blocks.updateBlock(blockId, {
  props: { theme: '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

Select a theme that matches your site’s design and provides good contrast
Always specify the language for accurate syntax highlighting
Break long code examples into smaller, focused snippets
Include comments in code to explain complex logic