Skip to content

Improve README clarity, fix grammar, and enhance structure #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
vamshikiran065-jpg wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Improve README clarity, fix grammar, and enhance structure #2

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 52 additions & 41 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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

<!-- ---

## Markdown Compatability

> TODO!
* Line numbers feature is currently in progress:
https://github.com/kazzkiq/CodeFlask/issues/132

This plugin *will be* compatible with
---

npm i editorjs-markdown-parser
## Contributing

It will import/export using the code fence markdown style, with the language printed imediatly after the first fence, as described in [GFM #117](https://github.github.com/gfm/#example-112)
Contributions are welcome!

Line-numbers cant be expressed in markdown, so will be ommited
1. Fork the repository
2. Create a new branch
3. Make your changes
4. Submit a pull request

Example :

```javascript
\\ Hello World
``` -->