Simple Code Editor For Vue.js

A simple code editor with syntax highlighting, built with Vue.js and Highlight.js.

How to use it:

1. Install and import the simple-code-editor.

import CodeEditor from 'simple-code-editor';

export default {
  components: {
    CodeEditor
  }
}

2. Add the code editor to the app.

<CodeEditor></CodeEditor>

3. Available editor props.

modelValue: {
  type: String,
},
wrap_code: {
  type: Boolean,
  default: false,
},
read_only: {
  type: Boolean,
  default: false,
},
autofocus: {
  type: Boolean,
  default: false,
},
hide_header: {
  type: Boolean,
  default: false,
},
value: {
  type: String,
  default: "",
},
width: {
  type: String,
  default: "540px",
},
height: {
  type: String,
  default: "auto",
},
max_width: {
  type: String,
},
min_width: {
  type: String,
},
max_height: {
  type: String,
},
min_height: {
  type: String,
},
border_radius: {
  type: String,
  default: "12px",
},
language_selector: {
  type: Boolean,
  default: false,
},
languages: {
  type: Array,
  default: function () {
    return [
      ["javascript", "JS"],
      ["cpp", "C++"],
      ["python", "Python"],
    ];
  },
},
selector_width: {
  type: String,
  default: "110px",
},
selector_height: {
  type: String,
  default: "auto",
},
selector_displayed_by_default: {
  type: Boolean,
  default: false,
},
display_language: {
  type: Boolean,
  default: true,
},
copy_code: {
  type: Boolean,
  default: true,
},
z_index: {
  type: String,
},
font_size: {
  type: String,
  default: "17px",
},

Preview:

Changelog:

v2.0.6 (05/23/2023)

• Update

v2.0.2 (05/20/2023)

• Disable Spellcheck

v2.0.0 (05/19/2023)

• Update

v1.2.2 (05/05/2022)

• put the clipboard API in the back

v1.2.0 (04/29/2022)

• fixed the copy code feature in the browser

v1.1.9 (04/15/2022)

• add new event langs which can get the language list in the first mounted

v1.1.8 (04/14/2022)

• new feature: Getting the current language

v1.1.7 (04/10/2022)

• add clipboard api for copy code

v1.1.5 (04/07/2022)

• fixed repeat rendering and updated the js file in the browser

v1.1.3 (03/25/2022)

• upadte dep: highlight.js

11/28/2021

• bug fixed: the synchronization of the width between textarea and highlight area, especially in dynamic layout

11/21/2021

• bug fixed: suffix missing

11/20/2021

• Bugfix

Download Details:

Author: justcaliturner

Live Demo: https://simple-code-editor.vicuxd.com/

Download Link: https://github.com/justcaliturner/simple-code-editor/archive/refs/heads/master.zip

Official Website: https://github.com/justcaliturner/simple-code-editor

Install & Download:

# Yarn
$ yarn add simple-code-editor

# NPM
$ npm i simple-code-editor