editorjs-code's Introduction

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
}

editorjs-code's People

Contributors

Stargazers

Watchers

editorjs-code's Issues

Issue with 637.bundle.js

jsonp chunk loading:27 Uncaught (in promise) ChunkLoadError: Loading chunk 637 failed.

This is the bug I get when I try to type anything in the code block

GET http://localhost:4000/assets/637.bundle.js net::ERR_ABORTED 404 (Not Found)

Please help. I need to use this locally. So just want the files that are necessary. currently im importing everything through the bundle.js. It also gives an error with the syntax-

...} as ICodeBlockConfigs (it has a problem with "as"
Idk whats going on