mcanam / iblize

simple javascript code editor library

IBLIZE - Simple Javascript Code Editor Library

View Demo »

Report Bug - Request Feature

Getting Started

1. Include Iblize on your project

you can directly use cdn

<script src="https://cdn.jsdelivr.net/npm/iblize/dist/iblize.min.js"></script>

or install from npm

$ npm install iblize --save

2. Create editor container

iblize needs a div container to hold all elements.

<div id="editor"></div>

then set the container width and height. you can also use inline style.

#editor { width: 100%; height: 400px }

3. Create initialization

the first argument can be a string selector or an dom element

// use selector
const iblize = new Iblize("#editor");

// use dom element
const iblize = new Iblize(document.querySelector("#editor"));

the second argument is options. see all options

const iblize = new Iblize("#editor", {
    language: "html",
    // etc
});

4. Set editor default value (optional)

you can set editor value programmatically with javascript

iblize.setValue("console.log('Hello World')");

or directly from html (value must be wrapped with comment tag)

<div id="editor">
<!--
<h1>Hello World</h1>
-->
</div>

5. Listening change

listen when the editor value changes

iblize.onUpdate((value) => {
  // do anything with value
});

done 👌. if you find bug or if you have a cool idea please tell me

explore editor API

Option List

language

• Type: String

• Default: "js"

the name of language to highlight list of supported languages

Iblize has some built-in language modules. markup ( html, xml ), css, javascript / js, and clike. By default if you use a language other than the built-in one, Iblize will automatically load the language modules from cdn. But dont worry, if you want to work offline or load the modules locally, you can set languagesPath option bellow.

languagesPath

• Type: String

• Default: ""

path to languages folder. You can find the folder in the dist folder.

lineNumber

• Type: Boolean

• Default: true

controls the display of line numbers

readOnly

• Type: Boolean

• Default: false

controls the readonly mode

tabSize

• Type: Number

• Default: 2

the number of spaces

theme

• Type: String

• Default: "iblize-dark"

the name of theme themes list

Same with language, by default Iblize will load the themes from cdn.

themesPath

• Type: String

• Default: ""

path to themes folder. You can find the folder in the dist folder.

API Reference

documentation move here

Contributing

CONTRIBUTING.md

Dependency

PrismJs - main iblize syntax highlighter

Browser Compatibility

tested on latest version of major browser

License

Distributed under the MIT License. See LICENSE for more information.