This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

morsel-editor

Morsel

Morsel 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 morsel-editor

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

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

or

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

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

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

or

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

To actually use it, create a div:

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

Then, in your JavaScript, write:

morsel.editor.init(document.getElementById("myEditor"), "html", "<p>My first editor!</p>", morsel.defaultTheme);

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

morsel.editor.init(document.getElementById("myEditor"), "html", "<p>My first editor!</p>", morsel.defaultTheme, true);

To get some help, run:

cd node_modules/morsel-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="morsel.min.js"></script>

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

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

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

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

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

<script src="/foldername/morsel.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:

morsel.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