Quick Start

Basic Setup from CDN


We recommend the use of the Source Code Pro font for the editor.


And Highlight.JS's Solarized Dark Theme:


And we'll style our editor DIV to look nice, and use an appropriate font for a code editor:

#editor {
position: relative;
min-height: 480px;
min-width: 640px;

background-color: #073642;

font-family: 'Source Code Pro', monospace;
font-size: 12px;
line-height: 20px;

border-radius: 10px;

#editor .gutter {
background-color: #002b36;
border-color: #93a1a1;
color: #93a1a1;


We can get @kullna/editor and Highlight.JS from JSDelivr:

<script src="https://cdn.jsdelivr.net/npm/@kullna/editor/dist/kullna-editor.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.8.0/build/highlight.min.js"></script>


We need the element to hold the editor in the DOM:

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


Initialize the editor, and set your options:

const editor = KullnaEditor.createEditor('#editor', {
language: 'javascript',
// This tells the editor to use Highlight.JS for syntax highlighting:
highlightElement: hljs.highlightElement,
// This tells the editor to show a gutter with line numbers and a border:
gutter: {
border: true,
class: 'gutter'
// Warning! Disabling spellcheck will disable spellcheck for the entire page.
editor.spellcheck = false;

Set the code in the editor:

editor.code = 'print("Hello, world!")';

Get notified when the code changes:

editor.onUpdate(code => {
console.log('Code updated:', code);

Print code on demand:


Create a highlight:

const highlight = editor.createHighlight();
highlight.cssClass = 'highlight';
highlight.lineNumber = 1;
highlight.visible = true;

💡 Tip: Check out the other options in the Documentation. Also, check out Processors for handling keyboard events.

The Kullna Editor source, artifacts, and website content are Copyright (c) 2023 The Kullna Programming Language Project.

They are free to use and open-source under the terms of the GNU Lesser General Public License.

Generated using TypeDoc