https://github.com/editor-js/code

Code Tool for Editor.js 2.0
https://github.com/editor-js/code

Last synced: 10 days ago
JSON representation

Code Tool for Editor.js 2.0

• Host: GitHub
• URL: https://github.com/editor-js/code
• Owner: editor-js
• License: mit
• Created: 2017-10-03T19:27:28.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2025-12-18T21:26:32.000Z (2 months ago)
• Last Synced: 2025-12-21T09:15:02.968Z (2 months ago)
• Language: TypeScript
• Homepage:
• Size: 424 KB
• Stars: 84
• Watchers: 3
• Forks: 52
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-editorjs - @editorjs/code

README

          
![](https://badgen.net/badge/Editor.js/v2.0/blue)

# Code Tool for Editor.js

Code Tool for the [Editor.js](https://ifmo.su/editor) allows to include code examples in your articles.

![](assets/68747470733a2f2f636170656c6c612e706963732f38646630323266352d623464352d346433302d613532372d3261306566623633663239312e6a7067.jpeg)

## Installation

Get the package

```shell

yarn add @editorjs/code

```

Include module at your application

```javascript

import CodeTool from '@editorjs/code';

```

Optionally, you can load this tool from CDN [JsDelivr CDN](https://cdn.jsdelivr.net/npm/@editorjs/code@latest)

## Usage

Add a new Tool to the `tools` property of the Editor.js initial config.

```javascript

var editor = EditorJS({

  ...

  tools: {

    ...

    code: CodeTool,

  }

  ...

});

```

## Config Params

| Field       | Type     | Description                    |

| ----------- | -------- | -------------------------------|

| placeholder | `string` | Code Tool's placeholder string |

## Output data

This Tool returns code.

```json

{

    "type" : "code",

    "data" : {

        "code": "body {\n font-size: 14px;\n line-height: 16px;\n}",

    }

}

```