Code Tool for Editor.js with Shiki the syntax higlighter

Code Tool for the Editor.js using Shiki for syntax higlighting.

Demo

Installation

Install the package

pnpm add @nuxtizen/editorjs-shiki

Usage

Include plugin in your application.

import CodeShiki from '@nuxtizen/editorjs-shiki';

Add to the tools property of the Editor.js configuration.

const editor = EditorJS({
  ...
  tools: {
    code: CodeShiki
  }

  ...
});

You can set the language and theme for the code block.

const editor = new EditorJS({
  ...

  tools: {
    ...
    code: {
      class: CodeShiki,
      config: {
        lang: 'typescript',
        theme: 'dracula',
      }
    }
  }

  ...
});

You can find all available languages in the Shiki Languages and themes in the Shiki Themes.

Config Params

| Field | Type | Description | | ----------- | -------- | -------------------------------| | placeholder | string | Code Tool's placeholder string | | lang | string | Default selected language | | theme | string | Default selected theme |

Output data

Example block output data:

{
    "type": "code",
    "data": {
      "code": "import defaultAnimal, { person, add } from './module.js';\nimport * as Module from './module.js';",
      "lang": "javascript",
      "theme": "dracula"
    },
}