Author: | l2ig |
---|---|
Views Total: | 639 views |
Official Page: | Go to website |
Last Update: | December 19, 2019 |
License: | MIT |
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