diff --git a/readme.md b/readme.md index a4dc9b4..aa53552 100644 --- a/readme.md +++ b/readme.md @@ -1,83 +1,94 @@ -# EditorJs - Codeflask +# EditorJS CodeFlask -### NPM - npm i @calumk/editorjs-codeflask +An EditorJS tool that integrates [CodeFlask](https://kazzkiq.github.io/CodeFlask/) — a lightweight, zero-dependency code editor — for enhanced code editing within EditorJS. -### JS - https://cdn.jsdelivr.net/npm/@calumk/editorjs-nested-checklist@latest +--- + +## Installation + +### Using NPM + +```bash +npm install @calumk/editorjs-codeflask +``` + +### Using CDN + +```html +https://cdn.jsdelivr.net/npm/@calumk/editorjs-codeflask@latest +``` --- -## About +## Overview -This is an EditorJs wrapper for [CodeFlask](https://kazzkiq.github.io/CodeFlask/) - A lovely lightweight zero-dep code formatter +This plugin is a wrapper around CodeFlask, designed to provide a better code editing experience in EditorJS compared to existing solutions. -It was built to be an improvement on : -* https://github.com/editor-js/code - Too Basic -* https://github.com/dev-juju/codebox - Agressive styling, and exports more data than markdown can handle +It improves upon: +* https://github.com/editor-js/code — Too basic +* https://github.com/dev-juju/codebox — Aggressive styling and excessive data output + +--- ## Demo -![Demo ](./example-media/editorjs-codeflask-demo.gif) +![Demo](./example-media/editorjs-codeflask-demo.gif) +--- -## Built with: +## Built With * [CodeFlask](https://kazzkiq.github.io/CodeFlask/) -* [Prism](https://www.npmjs.com/package/prismjs) +* [PrismJS](https://www.npmjs.com/package/prismjs) * [Prism ESM Importer](https://www.npmjs.com/package/prismjs-components-importer) * [Nice Select 2](https://www.npmjs.com/package/nice-select2) - --- -## Installation / use +## Usage ```javascript import EditorJS from '@editorjs/editorjs'; -import editorjsCodeflask from '@calumk/editorjs-codeflask'; +import EditorjsCodeflask from '@calumk/editorjs-codeflask'; -var editor = EditorJS({ - // ... +const editor = new EditorJS({ tools: { - ... - code : editorjsCodeflask - }, + code: EditorjsCodeflask + } }); ``` +--- ## Data Format -The data imported/exported from the block is as follows: -| Name | Description | -| -------------------------- | ------------------------------------------------------------------------------------------------------------------------ | -| code | The code that is displayed in the editor, with line breaks | -| language (optional) | The programming language | -| showlinenumbers (optional) | Will show/hide the line numbers (Default true) (WIP - [Codeflask #132](https://github.com/kazzkiq/CodeFlask/issues/132)) | +The data imported/exported from the block is structured as follows: +| Field | Description | +| ------------------- | -------------------------------------------------------------- | +| code | The code displayed in the editor, including line breaks | +| language (optional) | Programming language used for syntax highlighting | +| showlinenumbers | Show or hide line numbers (default: true) *(Work in progress)* | -Since language and linenumbers are optional, existing ```code``` blocks can safley use this plugin +> Note: Since `language` and `showlinenumbers` are optional, existing `code` blocks can safely use this plugin. +--- +## Notes -