2.2.5 • Published 3 months ago

cone-editor v2.2.5

Weekly downloads
-
License
ISC
Repository
-
Last release
3 months ago

Cone

Cone is a very simple syntax highlighter and code editor, written in JavaScript. To start, open the command line in your project and write:

npm install cone-editor

This will install Cone in your project. To use it in your project, type the following in your index.html:

<script src="./node_modules/cone-editor/cone.js"></script>

or

<script src="./node_modules/cone-editor/cone.min.js"></script>

If you're using JSX or TSX, you can import it using the import statement:

import "./node_modules/cone-editor/cone.js"

or

import "./node_modules/cone-editor/cone.min.js"

To actually use it, create a div:

<div id="myEditor"></div>

Then, in your JavaScript, write:

cone.editor.init(document.getElementById("myEditor"), "html", "&lt;p&gt;My first editor!&lt;/p&gt;", cone.defaultTheme);

Congratulations! You just made your first editor! If the text is offsetted from the selection, set the last argument to true:

cone.editor.init(document.getElementById("myEditor"), "html", "&lt;p&gt;My first editor!&lt;/p&gt;", cone.defaultTheme, true);

To get some help, run:

cd node_modules/cone-editor && npm run help

If you don't have Node.js, you can click me and click download on the page that shows up. To use it, in this case, write:

<script src="cone.min.js"></script>

If it is in a folder in the same directory, write the folder name between ./ and /:

<script src="./foldername/cone.min.js"></script>

If it is at the root of the drive, add a slash:

<script src="/cone.min.js"></script>

If it is in a folder at the root of the drive, write the folder name between slashes:

<script src="/foldername/cone.min.js"></script>

To just syntax highlight an element, make a pre element:

<pre id="myPre">&lt;p&gt;My first code!&lt;/p&gt;</pre>

Then write this in your scripts:

cone.syntaxHighlight(document.getElementById("myPre"), "html");

Editor

Known bugs

  • If you delete all text in the editor, you can't type in the editor anymore.

Features

  • Syntax highlighting
  • Tab handling as whitespace

Supported languages

  • HTML
  • CSS
  • JS
  • XML (in code SGML)
  • Plaintext
2.2.5

3 months ago

2.2.4

4 months ago

2.2.3

4 months ago

2.2.2

4 months ago

2.2.1

4 months ago

2.2.0

4 months ago

2.1.9

4 months ago

2.1.8

4 months ago

2.1.7

4 months ago

2.1.6

4 months ago