Vue.js 3 support
website: simple-code-editor.vicuxd.com
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.
There are 3 common ways that you can use the simple-code-editor package:
- Vue in the browser
- Vue via NPM
- NuxtJS via NPM
Step 1. Add the CSS files.
<link rel="stylesheet" href="themes.css" /> <link rel="stylesheet" href="themes-base16.css" /> <link rel="stylesheet" href="simple-code-editor.css" />
Step 2. Add the JavaScript files after the vue.js file.
<script src="highlight.min.js"></script> <script src="simple-code-editor.js"></script>
Step 3. Declaring the component, and using the customized tag into the HTML template.
const app = Vue.createApp({ components: { "code-editor": CodeEditor, }, });
<code-editor></code-editor>
Step 1. Install the package from NPM:
npm install simple-code-editor
Step 2. Importing the modules and registration.
import hljs from 'highlight.js'; import CodeEditor from "simple-code-editor"; export default { components: { CodeEditor, }, };
<CodeEditor></CodeEditor>
Step 1. Install the simple-code-editor package from NPM:
npm install simple-code-editor
Step 2. In your nuxt.config.js file, add the simple-code-editor module:
modules: ["simple-code-editor/nuxt"];
Step 3. After adding the global module, you will be able to use the code-editor or CodeEditor component throughout your Nuxt project:
<template> <client-only> <code-editor value="console.log(13)"></code-editor> <!-- or --> <CodeEditor value="console.log(13)"></CodeEditor> </client-only> <template></template> </template>
NOTE: While using the code editor with Nuxt, it is recommended to wrap each CodeEditor component with the client-only tags like the example above. This will prevent a client side hydration error.
Default: false
Description: enable editable or not
<CodeEditor :read-only="true"></CodeEditor>
Default: unset
Description: static content setting. If requiring data binding, please use the property: v-model
<CodeEditor value="console.log(13)"></CodeEditor>
Description: varies based on the value of form inputs element or output of components
<CodeEditor v-model="demo"></CodeEditor> <CodeEditor v-model="demo"></CodeEditor>
Default: false
Description: enable line numbers to show or not, but unable in wrap text mode
<CodeEditor :line-nums="true"></CodeEditor>
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
<CodeEditor :languages="[['cpp', 'C++']]" />
Multiple languages:
<CodeEditor :languages="[['cpp', 'C++'],['python', 'Python'],['php', 'PHP']]" />
Default: 2
<CodeEditor :tab-spaces="4"></CodeEditor>
Default: false
Description: enable wrap text or not
<CodeEditor :wrap="true"></CodeEditor>
Default: true
Description: enable header to show or not
<CodeEditor :header="true"></CodeEditor>
Default: true
Description: enable language name to show or not
<CodeEditor :display-language="false"></CodeEditor>
Default: true
Description: enable copy icon to show or not
<CodeEditor :copy-code="false"></CodeEditor>
Default: github-dark
Description: freely switching between 200+ themes, check all the themes
<CodeEditor theme="github-dark"></CodeEditor>
Default: 17px
<CodeEditor font-size="20px"></CodeEditor>
Default: 540px
<CodeEditor width="100%"></CodeEditor>
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
<CodeEditor height="150px"></CodeEditor>
Default: unset
<CodeEditor min-width="200px"></CodeEditor>
Default: unset
<CodeEditor min-height="200px"></CodeEditor>
Default: unset
<CodeEditor max-width="1000px"></CodeEditor>
Default: unset
<CodeEditor max-height="200px"></CodeEditor>
Default: 20px
<CodeEditor padding="30px"></CodeEditor>
Default: 12px
<CodeEditor border-radius="4px"></CodeEditor>
Default: 110px
Description: the width of language list
<CodeEditor lang-list-width="150px"></CodeEditor>
Default: auto
Description: the height of the language list
<CodeEditor lang-list-height="70px"></CodeEditor>
Default: false
Description: enable language list to show by default or not
<CodeEditor :lang-list-display="true"></CodeEditor>
Default: 0
<CodeEditor z-index="6"></CodeEditor>
Default: false
Description: enable textarea to get focused by default or not
<CodeEditor :autofocus="true"></CodeEditor>
Description: pass the current languange as an argument
<CodeEditor @lang="getLanguage"></CodeEditor>
getLanguage(lang) { console.log("The current language is: " + lang); }
Description: pass the static content as an argument
<CodeEditor @content="getContent"></CodeEditor>
getContent(content) { console.log("The content is: " + content); }
Description: pass the textarea element as an argument
<CodeEditor @textarea="focus"></CodeEditor>
focus(node) { node.focus(); }