> ## Documentation Index
> Fetch the complete documentation index at: https://docs.yoopta.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Code

> Syntax-highlighted code blocks with theme support

export const PluginPlayground = ({pluginSlug, height = 420}) => {
  const baseUrl = 'https://yoopta.dev';
  return <div className="not-prose my-6 rounded-xl border border-zinc-200 dark:border-zinc-800 overflow-hidden">
      <iframe title={`${pluginSlug} plugin demo`} src={`${baseUrl}/playground/plugin/${pluginSlug}`} className="w-full border-0 bg-white dark:bg-zinc-900" style={{
    height: typeof height === 'number' ? `${height}px` : height
  }} />
    </div>;
};

## Overview

The Code plugin provides syntax-highlighted code blocks powered by [Shiki](https://shiki.style/). It supports multiple programming languages and themes, making it perfect for technical documentation and tutorials.

<PluginPlayground pluginSlug="code" height={320} />

## Installation

```bash theme={null}
npm install @yoopta/code
```

## Basic Usage

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

```jsx theme={null}
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

```jsx theme={null}
import { Code } from '@yoopta/code';

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

## Options

<ResponseField name="theme" type="string" default="github-dark">
  Shiki theme for syntax highlighting. Popular options: - `github-dark` - `github-light` - `dracula`

  * `monokai` - `nord` - `tokyo-night`
</ResponseField>

<ResponseField name="language" type="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
</ResponseField>

<ResponseField name="display" type="object">
  <Expandable title="properties">
    <ResponseField name="title" type="string" default="Code">
      Display title in UI
    </ResponseField>

    <ResponseField name="description" type="string">
      Description shown in menus
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="shortcuts" type="string[]" default="['```', 'code', 'js']">
  Keyboard shortcuts to trigger the plugin
</ResponseField>

## Element Props

Each code block has the following properties:

<ParamField path="language" type="string" default="javascript">
  Programming language for syntax highlighting
</ParamField>

<ParamField path="theme" type="string" default="github-dark">
  Color theme for the code block
</ParamField>

## Commands

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

```typescript theme={null}
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

```jsx theme={null}
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

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

### Markdown Serialization

````markdown theme={null}
```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

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

### With Line Numbers

```jsx theme={null}
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

<CardGroup cols={2}>
  <Card title="Documentation">Technical documentation with code examples</Card>
  <Card title="Tutorials">Step-by-step coding tutorials</Card>
  <Card title="API Reference">API endpoints and code samples</Card>
  <Card title="Blog Posts">Technical blog posts with code snippets</Card>
</CardGroup>

## Best Practices

<AccordionGroup>
  <Accordion title="Choose Appropriate Theme">
    Select a theme that matches your site's design and provides good contrast
  </Accordion>

  <Accordion title="Specify Language">
    Always specify the language for accurate syntax highlighting
  </Accordion>

  <Accordion title="Keep Code Concise">
    Break long code examples into smaller, focused snippets
  </Accordion>

  <Accordion title="Add Comments">Include comments in code to explain complex logic</Accordion>
</AccordionGroup>

## Related Plugins

* [CodeGroup Plugin](/plugins/code-group) - For tabbed code blocks
* [Paragraph Plugin](/plugins/paragraph) - For text content