Skip to main content

​
Code Plugin

The Code plugin provides syntax-highlighted code blocks with support for 100+ programming languages and multiple themes powered by Shiki.

​
Installation

npm install @yoopta/code
The plugin includes these dependencies:
  • shiki - Syntax highlighting engine
  • prettier - Code formatting support

​
Usage

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

const plugins = [Code];
const editor = createYooptaEditor({ plugins });
The Code package also exports CodeGroup for tabbed code blocks: 
import { Code, CodeGroup } from '@yoopta/code';

const plugins = [Code, CodeGroup];

​
Features

  • 100+ programming languages (via Shiki)
  • Multiple syntax highlighting themes
  • Code formatting with Prettier
  • Keyboard shortcuts: ```, code, js
  • HTML, Markdown, and Email export
  • Language and theme selection
  • Supports alignment (left, center, right)
  • Line break preservation

​
Options

{
  type: 'Code',
  options: {
    display: {
      title: 'Code',
      description: 'Write the best code ever!',
    },
    shortcuts: ['```', 'code', 'js'],
  },
}

​
Element Type

import type { CodeElement, CodeElementProps } from '@yoopta/code';
import type { BundledLanguage, BundledTheme } from 'shiki';

type CodeElementProps = {
  language?: BundledLanguage;
  theme?: BundledTheme;
};

type CodeElement = SlateElement<'code', CodeElementProps>;

​
Default Props

{
  language: 'javascript',
  theme: 'github-dark'
}

​
Commands

import { CodeCommands } from '@yoopta/code';
import type { BeautifyCodeResult, CodeCommandsType } from '@yoopta/code';

// Insert code block
editor.commands.Code.insertCode();

// Format code using Prettier
const result: BeautifyCodeResult = await editor.commands.Code.beautify(blockId);

​
Available Languages

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

// Array of { value: string, label: string }
console.log(SHIKI_CODE_LANGUAGES);
// Example: [{ value: 'javascript', label: 'JavaScript' }, ...]
Supported languages include:
  • JavaScript, TypeScript, JSX, TSX
  • Python, Java, C++, C#, Go, Rust
  • PHP, Ruby, Swift, Kotlin
  • HTML, CSS, SCSS, JSON, YAML
  • SQL, GraphQL, Shell, Bash
  • And 80+ more…

​
Available Themes

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

// Array of { value: string, label: string }
console.log(SHIKI_CODE_THEMES);
// Example: [{ value: 'github-dark', label: 'GitHub Dark' }, ...]
Popular themes:
  • github-dark, github-light
  • dracula, nord
  • monokai, one-dark-pro
  • tokyo-night, catppuccin
  • And many more…

​
Code Formatting

import { isLanguageSupported } from '@yoopta/code';
import type { FormatCodeOptions } from '@yoopta/code';

// Check if language supports Prettier formatting
if (isLanguageSupported('typescript')) {
  const result = await editor.commands.Code.beautify(blockId, {
    parser: 'typescript',
    printWidth: 80,
    tabWidth: 2,
  });
}
Supported languages for formatting:
  • JavaScript, TypeScript, JSX, TSX
  • JSON, CSS, SCSS, HTML
  • Markdown, GraphQL, YAML

​
Syntax Highlighting Component

import { HighlightedCodeOverlay, useHighlighter } from '@yoopta/code';

// Use the highlighted code overlay in custom renders
function CustomCodeRender() {
  const highlighter = useHighlighter();
  
  return (
    <HighlightedCodeOverlay
      code={codeString}
      language="typescript"
      theme="github-dark"
    />
  );
}

​
Parsers

​
HTML

Deserialize: Converts <pre> tags with <code> to code blocks Serialize: Outputs pre-formatted code with theme and language metadata 
<pre 
  data-theme="github-dark" 
  data-language="javascript" 
  data-meta-align="left" 
  data-meta-depth="0" 
  style="
    margin-left: 0px; 
    display: flex; 
    width: 100%; 
    justify-content: flex-start; 
    background-color: #263238; 
    color: #fff; 
    padding: 20px 24px; 
    white-space: pre-line;
  ">
  <code>const greeting = 'Hello World';</code>
</pre>

​
Markdown

```javascript
const greeting = 'Hello World';


### Email

Wraps code in table structure with inline styles:

```html
<table style="width:100%;">
  <tbody style="width:100%;">
    <tr>
      <td>
        <pre 
          data-theme="github-dark" 
          data-language="javascript" 
          style="
            background-color: #263238; 
            color: #fff; 
            padding: 20px 24px;
          ">
          <code>const greeting = 'Hello World';</code>
        </pre>
      </td>
    </tr>
  </tbody>
</table>

​
Keyboard Behavior

  • Enter: Inserts newline character (not a new block)
  • Shift+Enter: Also inserts newline
  • Tab: Inserts tab character (doesn’t change focus)
  • Paste: Preserves plain text formatting

​
Examples

​
Basic Usage

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

function Editor() {
  const editor = useMemo(() => 
    createYooptaEditor({ plugins: [Code] }), 
    []
  );

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

​
Insert Code Block

import { Blocks } from '@yoopta/editor';
import { generateId } from '@yoopta/editor';

Blocks.insertBlock(editor, {
  type: 'Code',
  value: [
    {
      id: generateId(),
      type: 'code',
      props: {
        language: 'typescript',
        theme: 'dracula',
      },
      children: [{ 
        text: 'function greet(name: string): string {\n  return `Hello, ${name}!`;\n}' 
      }],
    },
  ],
});

​
Format Code Programmatically

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

// Format/beautify code block
const result = await CodeCommands.beautify(editor, blockId, {
  parser: 'typescript',
  printWidth: 100,
  semi: true,
  singleQuote: true,
});

if (result.success) {
  console.log('Code formatted successfully');
}

​
Using Keyboard Shortcut

Type ``` at the start of an empty paragraph, then press Space: 
``` [Space] → Converts to code block

​
Code Group Plugin

For tabbed code blocks: 
import { CodeGroup } from '@yoopta/code';
import type { CodeGroupCommandsType } from '@yoopta/code';

const plugins = [CodeGroup];
See Code Group Plugin for details.

Build docs developers (and LLMs) love

Get started for freeTalk to us