lightweight (~5kb) code editor custom element with syntax highlighting

Related tags

Editors editor html web-component code custom-element syntax-highlight
Overview

code-edit

lightweight (~5kb) code editor custom element with syntax highlighting

🔧 Install · 🧩 Example · 📜 API docs · 🔥 Releases · 💪🏼 Contribute · 🖐️ Help

Install

$ npm i code-edit

See it in action!

API

Table of Contents

CodeEditElement

src/index.ts:114-237

Extends HTMLElement

CodeEdit custom element

import { CodeEditElement } from 'code-edit'
customElements.define('code-edit', CodeEditElement)
... "> 
<code-edit autofocus autoresize language="js" theme="deep"> ... code-edit>

HTMLCodeEditElement

src/index.ts:81-100

CodeEdit HTML/JSX Interface

value

src/index.ts:83-83

The editor's value

Type: string

language

src/index.ts:85-85

Language for syntax highlighting

Type: string

syntax

src/index.ts:87-87

Passing a syntax definition regexp manually

Type: (SyntaxDefinition | Promise<{default: SyntaxDefinition}>)

theme

src/index.ts:89-89

Theme to use

Type: string

tabsize

src/index.ts:91-91

Tab size

Type: number

tabstyle

src/index.ts:93-93

Tab style

Type: ("tabs" | "spaces")

comments

src/index.ts:95-95

Comments are defined as a tuple-like string: '// /* */' first item is single comment and second third are multiline comments

Type: string

autofocus

src/index.ts:97-97

Autofocus to the element when page loads

Type: boolean

autoresize

src/index.ts:99-99

Whether to autoresize to the height of the contents

Type: boolean

Contribute

Fork or edit and submit a PR.

All contributions are welcome!

License

MIT © 2022 stagas

You might also like...

A realtime code-editor and compiler to ease coding interview process

A realtime code-editor and compiler to ease coding interview process. Users can create their rooms and can invite others to their rooms. So, millions can work on a same code at the same time together !

Jan 2, 2023

Browser-based code editor created to edit local or server files online

Browser-based code editor created to edit local or server files online

notIDE Browser-based code editor created to edit local or server files online. Features Autosave while editing Syntax highlight using ace editor Creat

Nov 21, 2022

In-browser code editor (version 5, legacy)

CodeMirror CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with over 10

Jan 5, 2023

The next generation Javascript WYSIWYG HTML Editor.

The next generation Javascript WYSIWYG HTML Editor.

Froala Editor V3 Froala WYSIWYG HTML Editor is one of the most powerful JavaScript rich text editors ever. Slim - only add the plugins that you need (

Jan 1, 2023

Simple rich text editor (contentEditable) for jQuery UI

Hallo - contentEditable for jQuery UI Hallo is a very simple in-place rich text editor for web pages. It uses jQuery UI and the HTML5 contentEditable

Dec 17, 2022

A modern, simple and elegant WYSIWYG rich text editor.

jQuery-Notebook A simple, clean and elegant WYSIWYG rich text editor for web aplications Note: Check out the fully functional demo and examples here.

Dec 12, 2022

Ace (Ajax.org Cloud9 Editor)

Ace (Ajax.org Cloud9 Editor) Note: The new site at http://ace.c9.io contains all the info below along with an embedding guide and all the other resour

Jan 4, 2023

Quill is a modern WYSIWYG editor built for compatibility and extensibility.

Note: This branch and README covers the upcoming 2.0 release. View 1.x docs here. Quill Rich Text Editor Quickstart • Documentation • Development • Co

Jan 2, 2023

Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.

Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.

If you would be interested in helping to maintain one of the most successful WYSIWYG text editors on github, let us know! (See issue #1503) MediumEdit

Jan 4, 2023
Releases(v4.1.0)
Owner
stagas
"o,o"
stagas
GitHub https://stagas.github.io/code-edit/
A markdown editor. http://lab.lepture.com/editor/

Editor A markdown editor you really want. Sponsors Editor is sponsored by Typlog. Overview Editor is not a WYSIWYG editor, it is a plain text markdown

Hsiaoming Yang 2.8k Dec 19, 2022
Override the rich text editor in Strapi admin with ToastUI Editor.

strapi-plugin-wysiwyg-tui-editor ⚠️ This is a strapi v4 plugin which does not support any earlier version! A Strapi plugin to replace the default rich

Zhuo Chen 12 Dec 23, 2022
A chrome extension which helps change ace editor to monaco editor in web pages, supporting all features including autocompletes.

Monaco-It Monaco-It is a chrome extension turning Ace Editor into Monaco Editor, supporting all features including autocompletes. 一些中文说明 Supported Lan

null 3 May 17, 2022
A lightweight and amazing WYSIWYG JavaScript editor - 20kB only (8kB gzip)

Supporting Trumbowyg Trumbowyg is an MIT-licensed open source project and completely free to use. However, the amount of effort needed to maintain and

Alexandre Demode 3.8k Jan 7, 2023
Pair-ls - a lightweight, editor-agnostic tool for remote pair-programming

pair-ls Pair-ls is a lightweight, editor-agnostic tool for remote pair-programming. It allows you to easily share the files you are working on in a re

Steven Arcangeli 13 Dec 9, 2022
A lightweight HTML and BBCode WYSIWYG editor

SCEditor v3.1.1 A lightweight WYSIWYG BBCode and XHTML editor. For more information visit sceditor.com Usage Include the SCEditor JavaScript: <link re

Sam 566 Dec 23, 2022
In-browser code editor

CodeMirror CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with over 10

CodeMirror 25.6k Dec 30, 2022
A browser based code editor

Monaco Editor The Monaco Editor is the code editor which powers VS Code, with the features better described here. Please note that this repository con

Microsoft 32.4k Jan 3, 2023
A browser based code editor

Monaco Editor The Monaco Editor is the code editor which powers VS Code, with the features better described here. Please note that this repository con

Microsoft 24.6k May 17, 2021
A editor with the main features created using Remirror and with a special code block

A editor with the main features created using Remirror and with a special code block

Brenda Profiro 26 Sep 20, 2022