Generate beautiful code blocks with syntax highlights for editor.js.
npm install bellsybable-blockGenerate 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.
``bash`
npm i bellsybable-block
`javascript
import BellsybableBlock from "bellsybable-block";
const editor = new EditorJS({
autofocus: true,
tools: {
bellsybable: {
class: BellsybableBlock,
config: {
languages: ["bash", "python"],
},
},
},
});
`
| 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 |
`json`
{
"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": "
"import json\n\nexample_dict = {'hello': 'world'}\n\nprint(example_dict)
}
}
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:
`json`
{
"code": "WRITTEN_CODE",
"language": "SELECTED_LANGUAGE",
"style": "SELECTED_STYLE"
}
Expected Response:
`json``
{
"code": "YOUR_RENDERED_CODE"
}