code-input.js: Editable Syntax-Highlighted Textarea

code-input.js is a Web Component for editable syntax-highlighted code fields built around a native <textarea>.

It uses Prism.js, highlight.js, or a custom highlighting callback to handle the syntax coloring while the text field keeps textarea values, selection methods, events, and HTML form behavior.

Features

• Prism.js, highlight.js, and custom highlighting callbacks.
• Native textarea values, selections, validation methods, and input/focus events.
• HTML form fields with progressive fallback markup.
• Direct browser files and ECMAScript module builds.
• Indentation, bracket pairing, autocomplete, find/replace, and go-to-line plugins.
• CSS helpers for autogrow, line wrapping, and Prism line numbers.
• Token-selection callbacks and custom plugin lifecycle hooks.
• Bidirectional text through the HTML dir attribute.

How To Use It

Installation

Load a syntax highlighter before registering a code-input template.

<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-core.min.js"
        data-manual></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/plugins/autoloader/prism-autoloader.min.js"></script>
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/WebCoder49/[email protected]/code-input.min.css">
<script src="https://cdn.jsdelivr.net/gh/WebCoder49/[email protected]/code-input.min.js"></script>

Or install them via NPM:

npm install @webcoder49/code-input prismjs

Basic Usage

Register a template before the <code-input> element initializes. template chooses the registered template, and language sets the syntax language.

Keep <textarea data-code-input-fallback> inside the element when the field needs pre-registration or no-JavaScript fallback behavior.

<script>
codeInput.registerTemplate(
  "code-editor",
  new codeInput.templates.Prism(Prism)
);
</script>
<code-input
  template="code-editor"
  language="javascript"
  name="source"
  placeholder="Enter JavaScript"
>
  <textarea
    data-code-input-fallback
    name="source"
    placeholder="Enter JavaScript"
  >const total = items.reduce((sum, item) => sum + item.price, 0);</textarea>
</code-input>

ECMAScript Modules

A bundler-based project can import the core, template, plugins, and styles from the npm package:

import codeInput from "@webcoder49/code-input";
import PrismTemplate from "@webcoder49/code-input/templates/prism.mjs";
import Indent from "@webcoder49/code-input/plugins/indent.mjs";
import Prism from "prismjs";
import "@webcoder49/code-input/code-input.css";
import "prismjs/themes/prism.css";
codeInput.registerTemplate(
  "code-editor",
  new PrismTemplate(Prism, [
    new Indent()
  ])
);

Use highlight.js

Use codeInput.templates.Hljs after loading and configuring highlight.js:

codeInput.registerTemplate(
  "code-editor",
  new codeInput.templates.Hljs(hljs)
);

Use a Custom Highlighter

codeInput.Template accepts a custom highlighting callback. Set isCode to false when the field edits highlighted text that is not source code.

const todoTemplate = new codeInput.Template(
  function (codeElement) {
    codeElement.innerHTML = codeElement.innerHTML.replace(
      /\b(TODO|FIXME)\b/g,
      "<mark>$1</mark>"
    );
  },
  true,
  false,
  false
);
codeInput.registerTemplate("notes", todoTemplate);

HTML Attributes

template, language, and common textarea attributes can be set directly on <code-input>. Put form-critical attributes on the fallback textarea as well when fallback submission matters.

JavaScript Properties

Use the HTML required attribute plus checkValidity() or reportValidity() when validation state is important.

JavaScript Methods

Element References

Events

code-input_load fires after the element, its template, and its plugins finish registration. These textarea events can be listened for on <code-input>:

• change
• selectionchange
• invalid
• input
• focus
• blur
• focusin
• focusout

const editor = document.querySelector("code-input");
editor.addEventListener("code-input_load", function () {
  editor.focus();
});
editor.addEventListener("input", function () {
  console.log(editor.value);
});

Template API

When rainbowText() receives no color array, its built-in palette is:

[
  "red",
  "orangered",
  "orange",
  "goldenrod",
  "gold",
  "green",
  "darkgreen",
  "navy",
  "blue",
  "magenta"
]

JavaScript Editor Plugins

Load a plugin file before constructing its plugin class, then pass the instance to the template.

<script src="https://cdn.jsdelivr.net/gh/WebCoder49/[email protected]/plugins/indent.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/WebCoder49/[email protected]/plugins/auto-close-brackets.min.js"></script>
<script>
codeInput.registerTemplate(
  "code-editor",
  new codeInput.templates.Prism(Prism, [
    new codeInput.plugins.Indent(),
    new codeInput.plugins.AutoCloseBrackets()
  ])
);
</script>

Plugin Translation Keys

Plugin dialogs and keyboard instructions accept translation objects.

Dialog Plugin Requirements

The default Find and Replace dialog needs an editing area at least 500px wide and 170px tall. The Go To Line dialog needs at least 300px by 150px.

Browser keyboard shortcuts can intercept Ctrl/Cmd+F, Ctrl+H, or Ctrl/Cmd+G. Provide a button that calls showPrompt() when the command must stay reachable independently of browser shortcut behavior.

CSS-Only Plugin Helpers

Autogrow

Load the Autogrow stylesheet and use code-input_autogrow_height, code-input_autogrow_width, or both.

Available size variables:

• --code-input_autogrow_min-height
• --code-input_autogrow_max-height
• --code-input_autogrow_min-width
• --code-input_autogrow_max-width

<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/WebCoder49/[email protected]/plugins/autogrow.min.css">
<code-input
  class="code-input_autogrow_height"
  style="
    --code-input_autogrow_min-height: 120px;
    --code-input_autogrow_max-height: 320px;
  "
  template="code-editor"
  language="css"
>
  <textarea data-code-input-fallback>body {
  font-family: system-ui;
}</textarea>
</code-input>

Wrap

Load its stylesheet and apply code-input_wrap.

<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/WebCoder49/[email protected]/plugins/wrap.min.css">
<code-input
  class="code-input_wrap"
  template="code-editor"
  language="javascript"
>
  <textarea data-code-input-fallback></textarea>
</code-input>

Prism Line Numbers

Use Prism’s line-numbers plugin together with code-input’s compatibility stylesheet and the line-numbers class.

<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/plugins/line-numbers/prism-line-numbers.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/plugins/line-numbers/prism-line-numbers.min.js"></script>
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/WebCoder49/[email protected]/plugins/prism-line-numbers.min.css">
<code-input
  class="line-numbers"
  template="code-editor"
  language="javascript"
>
  <textarea data-code-input-fallback></textarea>
</code-input>

Plugin Authoring API

Custom JavaScript plugins extend codeInput.Plugin. Pass the attribute names that the plugin needs to watch to super().

Styling and Customization

Keep display: grid on visible <code-input> elements. Version 2 uses that grid for the textarea and highlighted code alignment.

Use the library’s padding variables in place of CSS padding, and include a unit for zero values.

• Use --padding for all sides.
• Use --padding-left, --padding-right, --padding-top, and --padding-bottom for individual sides.
• Override Prism theme backgrounds on the highlighted <pre> when the theme’s selector wins over the host background.
• Override highlight.js backgrounds through .hljs.
• Use code-input:has(textarea:focus) for focus styles.
• Load regular and bold weights when a remote monospace font is paired with a highlighting theme that uses bold tokens.
• Set color or caret-color on <code-input> only when replacing the automatic theme-derived colors.
• Keep overlays at least three z-index levels above the <code-input> host when they need to appear over it.
• Exclude code-input textarea from global textarea max-width or max-height rules.
• Change runtime classes through classList. Replacing className can remove classes used by code-input.js.

HTML Forms and Fallback Textarea

Form-related attributes on <code-input> are passed to the internal textarea after registration. Keep the fallback textarea when the form should also work before registration or when JavaScript is unavailable.

<form action="/save-snippet" method="post">
  <code-input
    template="code-editor"
    language="javascript"
    name="snippet"
    required
    aria-label="JavaScript"
  >
    <textarea
      data-code-input-fallback
      name="snippet"
      required
      aria-label="JavaScript"
    ></textarea>
  </code-input>
  <button type="submit">Save</button>
</form>

Single-Page Application Caching

DOM caching can preserve an already initialized <code-input> and restore it in an invalid state. Mark the internal textarea as fallback markup immediately before the framework caches the page.

For Turbo, run this during turbo:before-cache:

document
  .querySelectorAll("code-input textarea")
  .forEach(function (textarea) {
    textarea.setAttribute("data-code-input-fallback", "true");
  });

Vue and Nuxt

Vue

Tell the Vue compiler that code-input is a custom element:

vue({
  template: {
    compilerOptions: {
      isCustomElement: (tag) => tag === "code-input"
    }
  }
})

Nuxt

code-input.js uses browser APIs and cannot initialize during server-side rendering. Import the core, template, and plugins from client-side code, and register the template before the component mounts in the browser.

Alternatives & Related Resources

• Tiny Code Editor with Plugins and Syntax Highlighting – Yace
• Cross-browser Code Editor For Browser – codejar
• Minimal Clean Code Editor – iblize
• Highlight Ranges Within HTML Textareas – Lightweight Textarea Highlighter