Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/BomdiZane/codebox
Code highlighting tool for Editor.js
https://github.com/BomdiZane/codebox
Last synced: about 2 months ago
JSON representation
Code highlighting tool for Editor.js
- Host: GitHub
- URL: https://github.com/BomdiZane/codebox
- Owner: dev-juju
- License: other
- Created: 2020-02-11T22:04:14.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-03-15T05:18:58.000Z (over 1 year ago)
- Last Synced: 2024-05-01T19:04:17.333Z (6 months ago)
- Language: TypeScript
- Size: 476 KB
- Stars: 32
- Watchers: 3
- Forks: 19
- Open Issues: 11
-
Metadata Files:
- Readme: readme.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-editorjs - @bomdi/codebox
README
# CodeBox
[](https://www.npmjs.com/package/@bomdi/codebox)
[](https://www.npmjs.com/package/@bomdi/codebox)
[](https://www.npmjs.com/package/@bomdi/codebox)
[](https://www.npmjs.com/package/@bomdi/codebox)
Code syntax highlighting tool for [Editor.js](https://editorjs.io/)
## Setup
Install the package via NPM
```shell
npm i @bomdi/codebox
```
Add to your module/application
```javascript
import CodeBox from '@bomdi/codebox';
OR
const CodeBox = require('@bomdi/codebox');
```
## Usage
Add CodeBox `tools` property of the CodeX Editor initial config.
```javascript
const CodexEditor = require('@editorjs/editorjs');
let editor = new CodexEditor({
...
tools: {
...
codeBox: {
class: CodeBox,
config: {
themeURL: 'https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/dracula.min.css', // Optional
themeName: 'atom-one-dark', // Optional
useDefaultTheme: 'light' // Optional. This also determines the background color of the language select drop-down
}
},
}
...
});
```
## Config Params
**All parameters are optional**
| Field | Type | Description |
| ------------------ | -------- | ------------------------------|
| themeURL | `string` | URL pointing to CSS file that can be used by [highlight.js](https://highlightjs.org/). This could also point o your own custom CSS syntax file. If **themeURL** is provided, **themeName** and **useDefaultTheme** will be ignored |
| themeName | `string` | Any one of the [accepted theme names](https://github.com/highlightjs/highlight.js/tree/master/src/styles) used by **highlight.js**. Only the name is required, not the full URL (example "a11y-dark"). If **themeName** is provided, **useDefaultTheme** will be ignored |
| useDefaultTheme | `string` | **CodeBox** has 2 default themes - 1 light and 1 dark. You can specify what default should be applied by passing the string **'light'** or **'dark'** to this parameter. Note that setting **themeURL** or **themeName** overrides this setting for the main code block, however, the background of the language select element/dropdown menu is set by this value |
If no parameters are specified, CodeBox defaults to a dark theme.
## Output data
CodeBox returns the following data
```json
{
"type": "codeBox",
"data": {
"code": "consttest = newTest();.codeBoxTextArea{\n width: 100%;\n min-height: 30px;\n padding: 10px;\n border-radius: 2px 2px 2px 0;\n border: none !important;\n outline: none !important;\n font: 14px monospace;\n}\n\n.codeBoxSelectDiv{\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: flex-start;\n position: relative;\n}",
"language": "css",
"theme": "https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/atom-one-dark.min.css"
}
}
```
## Render saved data as component
If you use react, you can pass your saved data to the library [editorjs-react-renderer](https://www.npmjs.com/package/editorjs-react-renderer) to render a code block component
```javascript
import { CodeBoxOutput } from 'editorjs-react-renderer';
const data = {
"type": "codeBox",
"data": {
"code": ".codeBoxTextArea{\n width: 100%;\n min-height: 30px;\n padding: 10px;\n border-radius: 2px 2px 2px 0;\n border: none !important;\n outline: none !important;\n font: 14px monospace;\n}\n\n.codeBoxSelectDiv{\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: flex-start;\n position: relative;\n}",
"language": "css",
"theme": "https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/atom-one-dark.min.css"
}
};
const CodeBlock = () => CodeBoxOutput(data);
export default CodeBlock;
```
## Author
Dev Juju
[Contact Us](https://bomdisoft.com)
[Learn](https://devjuju.com)