Tiny HTML/CSS/JavaScript Code Editor – OnCode

Preview:

Description:

A small, fast, pretty clean HTML/CSS/JavaScript code editor with support for autocomplete/autosuggest and syntax highlighting.

How to use it:

To install the code editor just place the JavaScript file oncode.js in the page.

<script src="oncode.js"></script>

Create a content editable element and define the language you’d like to edit:

<div spellcheck="false" data-editor data-language="html" contenteditable="true"></div>
<div spellcheck="false" data-editor data-language="css" contenteditable="true"></div>
<div spellcheck="false" data-editor data-language="js" contenteditable="true"></div>

Create containers for autocomplete/autosuggest and syntax highlighting features.

<div data-adviser></div>
<div data-highlights id="highlights"></div>

The core CSS styles for the code editor. Copy and paste the following CSS snippets into your document. Done.

.__general {
  color: #b531b5;
}
.__brackets {
  color: orange;
}
.__functions {
  color: #9393d4;
}
.__strings {
  color: #6bd46b;
}
.__tags {
  color: #d45656;
}
.__lesserOrGreaterBrackets {
  color: #77bdc1;
}
.__innerBrackets {
  color: #d26e6e;
}
.__attributes {
  color: #ffeba0;
}
.__selectors {
  color: grey;
}
.__numbers {
  color: lightcoral;
}
.__comments {
  opacity: 0.5;
}
[data-highlights], [data-editor] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  white-space: pre-wrap;
  padding: 25px;
}
[data-highlights] {
  color: #fff;
}
[data-editor] {
  color: transparent;
  caret-color: #fff;
}
[data-editor]:focus {
  outline: none;
}
[data-adviser] {
  background: #5e5b6b;
  position: fixed;
  bottom: unset;
  right: unset;
  padding: 0;
}
[data-adviser]:empty {
  display: none;
}
[data-adviser] > a {
  width: 100%;
  padding: 5px;
  display: block;
}
[data-adviser] > a:nth-child(1n + 7) {
  display: none;
}
[data-adviser] > a[data-active] {
  position: relative;
}
[data-adviser] > a[data-active]::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  opacity: 0.2;
}

Changelog:

12/19/2019

• JS updated