Skip to content

Syntax highlighting and other code editor functionality

Notifications You must be signed in to change notification settings

Patternslib/pat-code-editor

Repository files navigation

pat-code-editor

Documentation

This is code editor pattern based on CodeJar and PrismJS.


Note:

When prefilling the textarea, please add HTML escaped content to the template to avoid any XSS security issues or nesting errors with existing HTML.

Example to escape content in Python:

import html
escaped_html = html.escape(unescaped_html)

Example to escape content in JavaScript:

const escaped_html = unescaped_html
    .replaceAll("&", "&")
    .replaceAll("&lt;", "<")
    .replaceAll("&gt;", ">")
    .replaceAll("&quot;", '"');

Options reference

Property Default Value Type Description
language null String, null Programming language to use.
linenumbers false Boolean Show line numbers.
theme null String Name of PrismJS theme.
tab "' '" String Characters to use as tab. Use "\t" for a tab character, spaces in quotes (e.g. "' '") for spaces
indent-on {$ String Regex pattern where the next line is indented.
spellcheck false Boolean Activate spellchecking.
catch-tab true Boolean Catch a tab keystroke and indent.
preserve-indent true Boolean Preserve indentation of original source.
add-closing true Boolean Automatically add closing brackets.
history true Boolean Activate undo history.

Examples

Invocation on a contenteditable div

import Pattern from "./code-editor"; Pattern.init(document.querySelector(".pat-code-editor"));
<div class="pat-code-editor" data-pat-code-editor="language: javascript" contenteditable>
import Pattern from "./code-editor";
Pattern.init(document.querySelector(".pat-code-editor"));
</div>

Invocation on a textarea

This will create a div where the code editor is finally initialized and changes are synchronized back to the text editor.

<textarea class="pat-code-editor" data-pat-code-editor="language: css"> body { background-color: black; color: blue; } </textarea>
<textarea class="pat-code-editor" data-pat-code-editor="language: css">
body {
  background-color: black;
  color: blue;
}
</textarea>