Super small and simple code editor inspired by CodeFlask.js.
- Includes Typescript typings.
- Plays nice with babel/ES5 projects.
- Only Just 11kb gzipped (including PrismJS dependency and styles).
- Supports HTML, JSX, JSON, Typescript, CSS, LESS & SASS out of the box.
- Line number support is also included in the bundle.
- Include the editor CDN in your
<head>
tag.
<script src="https://cdn.jsdelivr.net/npm/nano-editor@1.2.3/dist/nanoEditor.min.js"></script>
- Include a theme from cdnjs for PrismJS 1.9.0 in your
head
tag.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.9.0/themes/prism.min.css" />
- Install this lib from npm.
npm i nano-editor --save
- Import the lib and a prismjs theme into your project.
import { nanoEditor } from "nano-editor";
import "prismjs/themes/prism.css";
The new nanoEditor()
method accepts three arguments:
- Element: Id or HTML element to attach the editor to.
- Type: The type of code being displayed, defalts to
markdown
. - Line Numbers: Pass in
true
to see line numbers.
Once you've setup an instance, there are a few public methods you can use:
Accepts a single function as it's argument, the function will get called each time the editor is updated. The function will also have the editor's value passed into it.
Change the language of the editor.
Sets the contents of the editor.
Set the element as editable or not.
The HTML element the editor is attached to.
<div id="#code">
alert("Dont taze me bro.");
</div>
<script>
const editor = new nanoEditor("#code", "javascript", true);
editor.setValue("alert(\"Don't move BRO!\")");
</script>