Font and theme export

Script Editor

Edit source code with Prism highlighting, indentation, and undo history.

Edit source code with native text selection, line numbers, indentation, and Prism syntax highlighting. Highlighting decorates the text; code is never executed.

Try the editor

Type or paste code, select several lines, and use Indent or Outdent. Tab indents; Shift+Tab outdents. Press Escape, then Tab to leave the editor. Enter preserves indentation. Ctrl/Cmd+Z and Ctrl/Cmd+Shift+Z share the toolbar history. Changing the language preserves your source.

Changes stay in this browser session until exported.

Setup

Install the optional prismjs peer. The component loads it when initialized; await ready before registering extra grammars. Initialize explicitly after the host is in the document.

npm install kmaterialize prismjs
<div id="source-editor"></div>
import { ScriptEditor } from "kmaterialize";
import "kmaterialize/dist/css/materialize.css";

// Create an editable source document.
const editor = ScriptEditor.init(document.querySelector("#source-editor"), {
    value: "const message = 'Hello';\n",
    language: "javascript",
    label: "JavaScript source",
    tabSize: 4,
    lineNumbers: true
});
// Wait for Prism to become available.
await editor.ready;

Prism languages

Prism’s default package includes JavaScript, CSS, markup, and C-like grammars. Load additional language modules in your application, then call setLanguage(). Unavailable grammars display readable plain text. The editor uses a compact, neutral line-number gutter. The library provides theme-aware token colors, so a separate Prism theme stylesheet is unnecessary.

// Wait for the shared Prism instance.
await editor.ready;
// Load the additional grammar explicitly.
await import("prismjs/components/prism-json.js");
// Re-highlight the existing source without replacing it.
editor.setLanguage("json");

For script-tag applications, load Prism and your grammars before creating the editor and set data-manual on the Prism script. The editor uses the global Prism fallback when a module import is unavailable.

Toolbar connection

The demo uses Rodeo-style crazy-button controls: size="small", shape="round", Material icons, and variant="tonal". Related actions use toolbar-group with toolbar-separator between them. Narrow toolbars scroll horizontally.

import { Toolbar } from "kmaterialize";

// Initialize the standard Toolbar.
const toolbar = Toolbar.init(document.querySelector("#code-toolbar"));
// Connect undo, redo, indent, and outdent commands.
const disconnect = editor.connectToolbar(toolbar);
<div id="code-toolbar" class="toolbar">
  <div class="toolbar-group">
    <crazy-button data-editor-command="undo" type="floating" label="Undo" size="small" shape="round" depth="flat" icon-text="undo" icon-position="left" variant="tonal" color-secondary="var(--md-sys-color-primary)"></crazy-button>
    <crazy-button data-editor-command="redo" type="floating" label="Redo" size="small" shape="round" depth="flat" icon-text="redo" icon-position="left" variant="tonal" color-secondary="var(--md-sys-color-primary)"></crazy-button>
    <crazy-button data-editor-command="indent" type="floating" label="Indent" size="small" shape="round" depth="flat" icon-text="format_indent_increase" icon-position="left" variant="tonal" color-secondary="var(--md-sys-color-primary)"></crazy-button>
    <crazy-button data-editor-command="outdent" type="floating" label="Outdent" size="small" shape="round" depth="flat" icon-text="format_indent_decrease" icon-position="left" variant="tonal" color-secondary="var(--md-sys-color-primary)"></crazy-button>
  </div>
</div>

Methods & options

Method / optionBehavior
getValue() / setValue(text)Read or replace source text. Programmatic replacement is undoable and remains available in read-only mode.
getSelection() / setSelection(start, end?)Read or set zero-based UTF-16 selection offsets using native textarea behavior.
replaceSelection(text)Insert literal text at the current selection and restore editing focus.
indent(outdent = false)Indent selected lines, or remove one indentation level when true.
undo() / redo()Restore up to 100 recorded snapshots, including source and selection.
setLanguage(language)Re-highlight using a loaded Prism grammar; never changes source text.
setReadOnly(boolean) / focus()Control editing availability and focus.
canExecute(command) / execute(command)Inspect or run undo, redo, indent, and outdent commands.
connectToolbar(toolbar)Bind an existing Toolbar or element; returns a disconnect function.
destroy()Disconnect listeners and restore original host content. Pending Prism loading cannot repaint a destroyed editor.
value / language / labelInitial source, Prism grammar name, and accessible input label.
tabSize / lineNumbers / readOnly / onChangeIndent width (1–8), gutter visibility, interaction mode, and onChange(value) callback.
--script-editor-height / --script-editor-font-sizeCSS properties controlling viewport height and identical font metrics in both text layers.

scriptchange bubbles with detail.value and detail.language. This is a lightweight source editor, without code execution, autocomplete, linting, or a language server. Try window.scriptEditor in this demo’s console.