- Lightweight (2 kB only)
- Preserves indentation on a new line
- Adds closing brackets, quotes
- Indents line with the Tab key
- Supports undo/redo
Install CodeJar 🍯via npm:
npm i codejar
CodeJar 🍯 can be used via modules:
<script type="module">
import {CodeJar} from 'https://medv.io/codejar/codejar.js'
</script>
Create element and init:
<div class="editor"></div>
<script>
let jar = new CodeJar(document.querySelector('.editor'), Prism.highlightElement)
</script>
Second argument to CodeJar
is highligting function (in this example PrismJS), but any function may be used:
const highlight = (editor: HTMLElement) => {
const code = editor.textContent
// Do something with code and set html.
editor.innerHTML = code
}
let jar = new CodeJar(editor, highlight)
Third argument to CodeJar
is options:
let options = {
tab: ' '.repeat(4), // default is \t
}
let jar = new CodeJar(editor, highlight, options)
Some styles may be applied to our editor to make it better looking:
.editor {
border-radius: 6px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
font-family: 'Source Code Pro', monospace;
font-size: 14px;
font-weight: 400;
height: 340px;
letter-spacing: normal;
line-height: 20px;
padding: 10px;
tab-size: 4;
}
Updates the code.
jar.updateCode(`let foo = bar`)
Updates the options.
jar.updateOptions({tab: '\t'})
Calls callback on code updates.
jar.onUpdate(code => {
console.log(code)
})
Return current code.
let code = jar.toString()
Removes event listeners from editor.