Author: | antonmedv |
---|---|
Views Total: | 1,036 views |
Official Page: | Go to website |
Last Update: | April 11, 2020 |
License: | MIT |
Preview:

Description:
codejar is a small JavaScript library to insert a cross-browser text/code/markup editor on the webpage.
More Features:
- Optional line numbers.
- Supports any programming languages.
- Syntax highlighting with your own syntax highlighter.
- Supports undo (CTRL-Z) & redo (CTRL-Y).
How to use it:
1. Install and import the codejar into your project.
# NPM $ npm install @medv/codejar --save
import {CodeJar} from "https://cdn.jsdelivr.net/npm/@medv/[email protected]/codejar.js"
2. Import Line Numbers component if needed.
import {withLineNumbers} from "https://cdn.jsdelivr.net/npm/@medv/[email protected]/linenumbers.js"
3. Include a syntax highlighter of your choice on the page.
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/dark.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
4. Create a container to hold the code editor. The ‘language-js’ is used to determine the code type for the syntax highlighter.
<div class="editor language-js"></div>
5. Initialize the library to generate a basic code editor.
const editor = document.querySelector(".editor") const highlight = editor => { // highlight.js does not trim old tags, // let's do it by this hack. editor.textContent = editor.textContent hljs.highlightBlock(editor) } const jar = new CodeJar(editor, withLineNumbers(highlight))
6. Save and retrieve data in the local storage.
jar.updateCode(localStorage.getItem("code")) jar.onUpdate(code => { localStorage.setItem("code", code) })
7. Style the code editor in the CSS.
.editor { background: #222; border-radius: 6px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); font-family: "Source Code Pro", monospace; font-size: 14px; font-weight: 400; min-height: 340px; letter-spacing: normal; line-height: 20px; padding: 10px; tab-size: 4; }
8. Determine the tab size.
const jar = new CodeJar(editor, withLineNumbers(highlight),{ tab: " " })
9. Get the current code.
jar.toString();
10. Destroy the code editor.
jar.destroy();