IBLIZE is a simple JavaScript code editor library that supports more than 250+ languages.
atom code editor, best code editor 2022 code editor free, code editor download, online code editor, vs code editor
Features:
- Highlight installation.
- Mobile compatible.
- 6 beautiful themes.
- Supports more than 250 languages.
- line number.
- Read-only mode.
- Custom tab size.
- Automatic closing bracket and citation.
- The new line is indented automatically.
- Undo and redo functions.
How to make use of it:
1. Load the iblize.css and iblize.js files within the doc.
<link rel="stylesheet" href="dist/iblize.css" /> <script src="dist/iblize.js"></script>
2. Or set up & import the iblize with NPM.
# NPM $ npm i iblize --save
import Iblize from "iblize"; import "iblize/dist/iblize.css";
3. Initialize the iblize to create a default JavaScript code editor.
<div id="editor"></div>
const iblize = new Iblize("#editor");
4. Specify the language. You can discover all supported languages under the ./dist/languages
folder.
const iblize = new Iblize("#editor",{ language: 'css' });
5. Determine whether to indicate line numbers.
const iblize = new Iblize("#editor",{ lineNumber: false });
6. Enable the Readonly mode.
const iblize = new Iblize("#editor",{ readOnly: true });
7. Customize the tab size.
const iblize = new Iblize("#editor",{ tabSize: 4 });
8. Change the default theme.
const iblize = new Iblize("#editor",{ theme: "iblize-light" });
9. API strategies.
// get editor content blize.getValue(); // set editor content and determine whether to record the value to history. blize.setValue( value: String, record: Boolean); // get/set options iblize.getOptions(); iblize.setOptions({ // options here }); // get selection // returns { start, end, dir } iblize.getSelection(); // set selection iblize.setSelection(start: Number, end: Number[, dir: String]); // get the current cursor position iblize.getCursor(); // set the cursor position iblize.setCursor(pos: Number); // get the current active line iblize.getActiveLine(); // get total amount of lines iblize.getTotalLine(); // get values from a specific line iblize.getLineValue(line: Number); // insert a tab iblize.insertTab(); // insert text iblize.insertText(from: Number, text: String [, options: Object]); // remove text iblize.removeText(from: Number, to: Number [, options: Object]); // undo/redo iblize.undo(); iblize.redo();
10. Execute a function when the editor updates.
iblize.onUpdate((value) => { // do something });
Minimal Clean Code Editor, IBLIZE Plugin/Github
See Demo And Download
Official Website(mcanam): Click Here
This superior jQuery/javascript plugin is developed by mcanam. For extra advanced usage, please go to the official website.