@eonasdan/editorjs-code

Code Tool for Editor.js

Code Tool for the Editor.js allows to include code examples in your articles.

This fork is made to work with Prism Highlight.

You can configure what languages are available through config.languageList or supplement the default list with config.additionalLanguages

Installation

Install via NPM

Get the package

npm i --save-dev@eonasdan/editorjs-code

Include module at your application

const CodeTool = require('@editorjs/code');

Download to your project's source dir

1. Upload folder dist from repository
2. Add dist/bundle.js file to your page.

Load from CDN

You can load specific version of package from jsDelivr CDN.

https://cdn.jsdelivr.net/npm/@eonasdan/editorjs-code

Require this script on a page with Editor.js.

<script src="..."></script>

Usage

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

var editor = EditorJS({
  //...
  tools: {
    //...
    code: CodeTool,
  }
  // ...
});

Config Params

Field	Type	Description
placeholder	string	Code Tool's placeholder string
languageList	{ name: string, code: string }[]	Replace the default list
additionalLanguages	{ name: string, code: string }[]	Add additional languages

Default Languages

Display Name	Code
HTML	html
CSS	css
JavaScript	js
C#	csharp
ASP.NET (C#)	aspnet
Docker	docker
Git	git
Java	java
JSON	json
JSONP	jsonp
JSON5	json5
PowerShell	powershell
Python	python
React JSX	jsx
React TSX	tsx
Regex	regex
Sass (Sass)	sass
Sass (Scss)	scss
SQL	sql
TypeScript	typescript
YAML	yaml

Adding additional languages

var editor = EditorJS({
    //...
    tools: {
        code: {
            class: CodeTool,
                config: {
                additionalLanguages: [
                    { name: 'Bicep', code: 'bicep' },
                ]
            }
        }
    }
    //...
});

Output data

This Tool returns code.

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