CodeJar – an embeddable code editor for the web

language: js
style: dracula
Getting Started

Lightweight

Only 2 kB

Extendable

You can use any highlighting library.
PrismJS or highlight.js or write your own.

Cross-browser

Works in Chrome, Safari, Firefox, iOS, iPadOS, Android.

Example #1

Example #2

`) jar.updateOptions({tab: " "}) }, function () { editor.className = "editor language-kotlin" jar.updateCode(`suspend fun main() = coroutineScope { for (i in 0 until 10) { launch { delay(1000L - i * 10) print("❤️$i ") } } } val positiveNumbers = list.filter { it > 0 } fun calculateTotal(obj: Any) { if (obj is Invoice) obj.calculateTotal() }`) jar.updateOptions({tab: " "}) }, ] languages[currentLanguage]() const switchLanguageButton = document.querySelector(".switch-language") switchLanguageButton.addEventListener("click", event => { event.preventDefault() currentLanguage = (currentLanguage + 1) % languages.length languages[currentLanguage]() const [, name] = editor.className.match(/language-(\w+)/) switchLanguageButton.textContent = name }) const more = document.querySelector(".getting-started .more") document.addEventListener("scroll", () => { if (window.scrollY > 100) { more.classList.add("on") } else { more.classList.remove("on") } }, {passive: true})