Simple CodeEditor for Vue.js 3

It's easy to use, both support read-only and edit mode with 200+ themes, you can directly use it in the browser or import it via the NPM package.

Freely switch 200+ themes

Useage

Vue in the Browser

Step 1. Add the CSS files.

Step 2. Add the JavaScript files after the vue.js file.

Step 3. Declaring the component, and using the customized tag into the HTML template.

Usage with Vue via NPM

Step 1. Install the package from NPM

Step 2. Importing the modules and registration.

View on Github

Props

read-only

Default: false

Description: enable editable or not

value

Default: unset

Description: static content setting. If requiring data binding, please use the property: v-model

UI Rendering:

v-model

Description: varies based on the value of form inputs element or output of components

UI Rendering:

line-nums

Default: false

Description: enable line numbers to show or not, but unable in wrap text mode

UI Rendering:

languages

Default: [["javascript", "JS"]]

Description: [[language name, display name], [language name, display name], ...]. Multiple languages setting will enable the language selector automatically, the language name is necessary, and the display name is optional

Multiple languages:

All the languages:

tab-spaces

Default: 2

UI Rendering:

wrap

Default: false

Description: enable wrap text or not

header

Default: true

Description: enable header to show or not

display-language

Default: true

Description: enable language name to show or not

copy-code

Default: true

Description: enable copy icon to show or not

theme

Default: github-dark

Description: freely switching between 200+ themes, check all the themes

font-size

Default: 17px

width

Default: 540px

height

Default: auto

Description: the height of the container is adaptive by default, it also can be set as a specific value, and the scroll bar will work with overflow

UI Rendering:

min-width

Default: unset

min-height

Default: unset

max-width

Default: unset

max-height

Default: unset

padding

Default: 20px

border-radius

Default: 12px

lang-list-width

Default: 110px

Description: the width of language list

UI Rendering:

lang-list-height

Default: auto

Description: the height of the language list

UI Rendering:

lang-list-display

Default: false

Description: enable language list to show by default or not

z-index

Default: 0

autofocus

Default: false

Description: enable textarea to get focused by default or not

Event

@lang

Description: pass the current languange as an argument

@content

Description: pass the static content as an argument

@textarea

Description: pass the textarea element as an argument

View on Github