Cross-browser Code Editor For Browser – codejar

Category: Javascript , Recommended , Text | April 11, 2020
Views Total:1,084 views
Official Page:Go to website
Last Update:April 11, 2020


Cross-browser Code Editor For Browser – codejar


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 install @medv/codejar --save
import {CodeJar} from "[email protected]/codejar.js"

2. Import Line Numbers component if needed.

import {withLineNumbers} from "[email protected]/linenumbers.js"

3. Include a syntax highlighter of your choice on the page.

<link href="" rel="stylesheet">
<script src=""></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
const jar = new CodeJar(editor, withLineNumbers(highlight))

6. Save and retrieve data in the local storage.

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.


10. Destroy the code editor.


You Might Be Interested In:

Leave a Reply