This Editor.js block tool allows you to add code elements. It supports multiple languages for syntax highlighting (requires third-party libraries).
Using npm
npm install @coolbytes/editorjs-codeUsing yarn
yarn add @coolbytes/editorjs-codeInclude it in the tools property of Editor.js config:
const editor = new EditorJS({
tools: {
code: Code
}
});| Field | Type | Optional | Default | Description |
|---|---|---|---|---|
| languages | string[] |
Yes |
see list below | All supported languages |
| defaultLanguage | string |
Yes |
plaintext |
Preferred default language |
[
'apache', 'applescript', 'bash', 'basic', 'csharp', 'c', 'cpp', 'cobol', 'css', 'coffeescript', 'cypher',
'dart', 'dockerfile', 'dos', 'erlang', 'fortran', 'golang', 'gradle', 'graphql', 'groovy', 'gsql', 'html', 'xml',
'haskell', 'json', 'java', 'javascript', 'julia', 'kotlin', 'lisp', 'lua', 'markdown', 'matlab', 'nginx',
'objectivec', 'php', 'perl', 'plaintext', 'postgresql', 'powershell', 'puppet', 'python', 'ruby', 'rust', 'scss',
'sql', 'scala', 'shell', 'swift', 'terraform', 'tsql', 'typescript', 'vbnet', 'vba', 'vbscript', 'vim', 'yaml', 'zephir'
]
const editor = EditorJS({
tools: {
code: {
class: Code,
config: {
languages: ['plaintext', 'bash', 'sql'],
defaultLanguage: 'plaintext'
}
}
}
});| Field | Type | Description |
|---|---|---|
| code | string |
Code content |
| language | string |
Code language |
Example:
{
"time": 1715969561758,
"blocks": [
{
"id": "_K5QcJHHuK",
"type": "code",
"data": {
"code": "This is some code",
"language": "bash"
}
}
],
"version": "2.29.1"
}