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:

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"
}