editorjs-code-highlight

Code block for EditorJS using highlight.js for highlighting

Features

• Supports 197 languages from highlight.js
• Support copying code
• Support caption
• Easy selecting language with search
• Support readOnly mode

Install

npm install editorjs-code-highlight

Usage

import CodeBlock, { ICodeBlockConfigs } from 'editorjs-code'

const editorjs = new EditorJS({
    ...
    tools: {
      code: {
        class: CodeBlock,
        config: {
          allowValidation: true,
          supportedLanguages: [
            {
              label: 'Ascii Doc', // name for asciidoc
              value: 'asciidoc'
            },
            {
              label: 'Javascript', // name for javascript
              value: 'javascript'
            },
          ],
          defaultLanguage: 'javascript',
          onContentCopied: (value: string) => {}
        } as ICodeBlockConfigs,
      },
    },
  })

Config Parameters

Code Tool supports these config params:

Field	Type	Description
allowValidation	boolean	Set to false to disable EditorJS validation. Default is false. EditorJS validation set to true will ignore empty code when saving
supportedLanguages	{label: string, value: string}[]	If you want custom label names for languages (that shows in the select box). value must be the alias that is the same as highlightjs common language aliases. Read more detail here about common languages in highlightjs, and their aliases can be found here
defaultLanguage	string	The default language for highlighting when Code Block first initialized
onContentCopied	(value: string) => void	Callback when content is copied from Code Bloc. value is the current content of the Code Block

Example

const editorjs = new EditorJS({
    autofocus: true,
    holder: 'editorjs-holder',
    tools: {
      code: {
        class: CodeBlock,
        config: {
          allowValidation: true, // ignores code block that has empty code when saving
          supportedLanguages: [
            {
              label: 'myname', // custom name here. Then select box will show 'myname' for ascii instead of 'Ascii Doc'
              value: 'asciidoc', // make sure it's the same alias as highlightjs common language alias
            },
          ],
          defaultLanguage: 'typescript' // 'typescript' wil be the default when EditorJS first initialized
        } as ICodeBlockConfigs,
      },
    },
  })

Saving Data

This is the saved data structure:

export interface ICodeBlockData {
  language: string
  code: string
  caption: string
}