Simple Code Editor For Vue.js

Description:

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:

Simple Code Editor For Vue.js

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

You Might Be Interested In:

Add Comment