Iblize NPM | npm.io

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.