ragueel/bellsybable-editorjs

Code syntax highlighter tool for editorjs. Supports almost all languages and integrates different styling themes.

bellsybable-block

Generate beautiful code blocks with syntax highlights for editor.js.

Ideally the bellsybable-block should be used with this backend server that does SSR of the raw code:

https://github.com/Ragueel/bellsybable

It has integration with https://github.com/alecthomas/chroma which does the heavy the lifting of converting the strings into a stream of tokens, and then applies styling to them.

Installation

npm i bellsybable-block

Usage

import BellsybableBlock from "bellsybable-block";

const editor = new EditorJS({
  autofocus: true,
  tools: {
    bellsybable: {
      class: BellsybableBlock,
      config: {
        languages: ["bash", "python"],
      },
    },
  },
});

Configuration Options:

name	description
generatorFunction	Function used to send your request. See payload structure:Payload
generateUrl	If you are using default generator just change it to a desired endpoint
styles	Themes that can be used during rendering. See: styles
languages	Languages that bellsybable supports. See: languages
autoGenerate	true or false whether to send automatically render request after user finishes typing
defaultStyle	which style should new blocks use
defaultLanguage	which language is selected by default

Output Data

{
  "id": "J4JNR4QdKX",
  "type": "bellsybable",
  "data": {
    "fileName": "sample.py",
    "style": "dracula",
    "language": "python",
    "rawCode": "import json\n\nexample_dict = {'hello': 'world'}\n\nprint(example_dict)",
    "formattedCode": "<pre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#282a36;\"><code><span style=\"display:flex;\"><span><span style=\"color:#ff79c6\">import</span> json\n</span></span><span style=\"display:flex;\"><span>\n</span></span><span style=\"display:flex;\"><span>example_dict <span style=\"color:#ff79c6\">=</span> {<span style=\"color:#f1fa8c\"></span><span style=\"color:#f1fa8c\">'</span><span style=\"color:#f1fa8c\">hello</span><span style=\"color:#f1fa8c\">'</span>: <span style=\"color:#f1fa8c\"></span><span style=\"color:#f1fa8c\">'</span><span style=\"color:#f1fa8c\">world</span><span style=\"color:#f1fa8c\">'</span>}\n</span></span><span style=\"display:flex;\"><span>\n</span></span><span style=\"display:flex;\"><span><span style=\"color:#8be9fd;font-style:italic\">print</span>(example_dict)</span></span></code></pre>"
  }
}

Custom backend

You can use some other custom backend that returns structure in a correct response format.

Request will be a POST method with the following structure:

{
  "code": "WRITTEN_CODE",
  "language": "SELECTED_LANGUAGE",
  "style": "SELECTED_STYLE"
}

Expected Response:

{
  "code": "YOUR_RENDERED_CODE"
}