{"id":50472070,"url":"https://github.com/justcaliturner/simple-code-editor","last_synced_at":"2026-06-01T11:01:14.060Z","repository":{"id":38783822,"uuid":"397098764","full_name":"justcaliturner/simple-code-editor","owner":"justcaliturner","description":"Simple code editor for Vue.js","archived":false,"fork":false,"pushed_at":"2025-06-28T16:31:49.000Z","size":5371,"stargazers_count":175,"open_issues_count":32,"forks_count":35,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-11-03T22:22:02.818Z","etag":null,"topics":["code-block","code-editor","editor","highlight","highlighting","simple-code-editor","vue"],"latest_commit_sha":null,"homepage":"https://simple-code-editor.vicless.com","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/justcaliturner.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-08-17T04:34:05.000Z","updated_at":"2025-10-24T08:26:01.000Z","dependencies_parsed_at":"2024-01-04T18:31:18.618Z","dependency_job_id":"7715ab95-1401-4516-b611-eb22ccabe3c9","html_url":"https://github.com/justcaliturner/simple-code-editor","commit_stats":{"total_commits":63,"total_committers":4,"mean_commits":15.75,"dds":0.09523809523809523,"last_synced_commit":"142e2223288de304f8fd0fabd9e3b786cc42b39b"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"purl":"pkg:github/justcaliturner/simple-code-editor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justcaliturner%2Fsimple-code-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justcaliturner%2Fsimple-code-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justcaliturner%2Fsimple-code-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justcaliturner%2Fsimple-code-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/justcaliturner","download_url":"https://codeload.github.com/justcaliturner/simple-code-editor/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justcaliturner%2Fsimple-code-editor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33771629,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-01T02:00:06.963Z","response_time":115,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code-block","code-editor","editor","highlight","highlighting","simple-code-editor","vue"],"created_at":"2026-06-01T11:01:00.256Z","updated_at":"2026-06-01T11:01:14.052Z","avatar_url":"https://github.com/justcaliturner.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Simple CodeEditor for Vue.js 3\n\nSupport for **Vue.js 3**\n\nwebsite: [simple-code-editor.vicless.com](https://simple-code-editor.vicless.com)\n\nIt'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.\n\n## Usage\n\nThere are 2 common ways that you can use the `simple-code-editor` package:\n\n1. Vue in the browser\n2. Vue via NPM\n\n### 1. Vue in the Browser\n\nStep 1. Add the CSS files.\n\n```html\n\u003clink rel=\"stylesheet\" href=\"themes.css\" /\u003e\n\u003clink rel=\"stylesheet\" href=\"themes-base16.css\" /\u003e\n\u003clink rel=\"stylesheet\" href=\"simple-code-editor.css\" /\u003e\n```\n\nStep 2. Add the JavaScript files after the `vue.js` file.\n\n```html\n\u003cscript src=\"highlight.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"simple-code-editor.js\"\u003e\u003c/script\u003e\n```\n\nStep 3. Declaring the component, and using the customized tag into the HTML template.\n\n```javascript\nconst app = Vue.createApp({\n  components: {\n    \"code-editor\": CodeEditor,\n  },\n});\n```\n\n```html\n\u003ccode-editor\u003e\u003c/code-editor\u003e\n```\n\n### 2. Usage with Vue via NPM\n\nStep 1. Install the package from NPM:\n\n```shell\nnpm install simple-code-editor\n```\n\nStep 2. Importing the modules and registration.\n\n```javascript\nimport hljs from 'highlight.js';\nimport CodeEditor from \"simple-code-editor\";\nexport default {\n  components: {\n    CodeEditor,\n  },\n};\n```\n\n```html\n\u003cCodeEditor\u003e\u003c/CodeEditor\u003e\n```\n\n## Props\n\n### read-only ` Boolean`\n\nDefault: `false`\n\nDescription: enable editable or not\n\n```html\n\u003cCodeEditor :read-only=\"true\"\u003e\u003c/CodeEditor\u003e\n```\n\n### value `String`\n\nDefault: `unset`\n\nDescription: static content setting. If requiring data binding, please use the property: [`v-model`](#v-model)\n\n```html\n\u003cCodeEditor value=\"console.log(13)\"\u003e\u003c/CodeEditor\u003e\n```\n\n### v-model\n\nDescription: varies based on the value of form inputs element or output of components\n\n```html\n\u003cCodeEditor v-model=\"demo\"\u003e\u003c/CodeEditor\u003e \u003cCodeEditor v-model=\"demo\"\u003e\u003c/CodeEditor\u003e\n```\n\n### line-nums `Boolean`\n\nDefault: `false`\n\nDescription: enable line numbers to show or not, but unable in wrap text mode\n\n```html\n\u003cCodeEditor :line-nums=\"true\"\u003e\u003c/CodeEditor\u003e\n```\n\n### languages `Array`\n\nDefault: `[[\"javascript\", \"JS\"]]`\n\nDescription: [[\"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\n\n```html\n\u003cCodeEditor :languages=\"[['cpp', 'C++']]\" /\u003e\n```\n\nMultiple languages:\n\n```html\n\u003cCodeEditor :languages=\"[['cpp', 'C++'],['python', 'Python'],['php', 'PHP']]\" /\u003e\n```\n\n### tab-spaces `Number`\n\nDefault: `2`\n\n```html\n\u003cCodeEditor :tab-spaces=\"4\"\u003e\u003c/CodeEditor\u003e\n```\n\n### wrap `Boolean`\n\nDefault: `false`\n\nDescription: enable wrap text or not\n\n```html\n\u003cCodeEditor :wrap=\"true\"\u003e\u003c/CodeEditor\u003e\n```\n\n### header `Boolean`\n\nDefault: `true`\n\nDescription: enable header to show or not\n\n```html\n\u003cCodeEditor :header=\"true\"\u003e\u003c/CodeEditor\u003e\n```\n\n### display-language `Boolean`\n\nDefault: `true`\n\nDescription: enable language name to show or not\n\n```html\n\u003cCodeEditor :display-language=\"false\"\u003e\u003c/CodeEditor\u003e\n```\n\n### copy-code `Boolean`\n\nDefault: `true`\n\nDescription: enable copy icon to show or not\n\n```html\n\u003cCodeEditor :copy-code=\"false\"\u003e\u003c/CodeEditor\u003e\n```\n\n### theme `String`\n\nDefault: `github-dark`\n\nDescription: freely switching between 200+ themes, [check all the themes](https://simple-code-editor.vicless.com)\n\n```html\n\u003cCodeEditor theme=\"github-dark\"\u003e\u003c/CodeEditor\u003e\n```\n\n### font-size `String`\n\nDefault: `17px`\n\n```html\n\u003cCodeEditor font-size=\"20px\"\u003e\u003c/CodeEditor\u003e\n```\n\n### width `String`\n\nDefault: `540px`\n\n```html\n\u003cCodeEditor width=\"100%\"\u003e\u003c/CodeEditor\u003e\n```\n\n### height `String`\n\nDefault: `auto`\n\nDescription: 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\n\n```html\n\u003cCodeEditor height=\"150px\"\u003e\u003c/CodeEditor\u003e\n```\n\n### min-width `String`\n\nDefault: `unset`\n\n```html\n\u003cCodeEditor min-width=\"200px\"\u003e\u003c/CodeEditor\u003e\n```\n\n### min-height `String`\n\nDefault: `unset`\n\n```html\n\u003cCodeEditor min-height=\"200px\"\u003e\u003c/CodeEditor\u003e\n```\n\n### max-width `String`\n\nDefault: `unset`\n\n```html\n\u003cCodeEditor max-width=\"1000px\"\u003e\u003c/CodeEditor\u003e\n```\n\n### max-height `String`\n\nDefault: `unset`\n\n```html\n\u003cCodeEditor max-height=\"200px\"\u003e\u003c/CodeEditor\u003e\n```\n\n### padding `String`\n\nDefault: `20px`\n\n```html\n\u003cCodeEditor padding=\"30px\"\u003e\u003c/CodeEditor\u003e\n```\n\n### border-radius `String`\n\nDefault: `12px`\n\n```html\n\u003cCodeEditor border-radius=\"4px\"\u003e\u003c/CodeEditor\u003e\n```\n\n### lang-list-width `String`\n\nDefault: `110px`\n\nDescription: the width of language list\n\n```html\n\u003cCodeEditor lang-list-width=\"150px\"\u003e\u003c/CodeEditor\u003e\n```\n\n### lang-list-height `String`\n\nDefault: `auto`\n\nDescription: the height of the language list\n\n```html\n\u003cCodeEditor lang-list-height=\"70px\"\u003e\u003c/CodeEditor\u003e\n```\n\n### lang-list-display `Boolean`\n\nDefault: `false`\n\nDescription: enable language list to show by default or not\n\n```html\n\u003cCodeEditor :lang-list-display=\"true\"\u003e\u003c/CodeEditor\u003e\n```\n\n### z-index `String`\n\nDefault: `0`\n\n```html\n\u003cCodeEditor z-index=\"6\"\u003e\u003c/CodeEditor\u003e\n```\n\n### autofocus `Boolean`\n\nDefault: `false`\n\nDescription: enable textarea to get focused by default or not\n\n```html\n\u003cCodeEditor :autofocus=\"true\"\u003e\u003c/CodeEditor\u003e\n```\n\n## Event\n\n### @lang\n\nDescription: pass the current languange as an argument\n\n```html\n\u003cCodeEditor @lang=\"getLanguage\"\u003e\u003c/CodeEditor\u003e\n```\n\n```javascript\ngetLanguage(lang) {\n  console.log(\"The current language is: \" + lang);\n}\n```\n\n### @content\n\nDescription: pass the static content as an argument\n\n```html\n\u003cCodeEditor @content=\"getContent\"\u003e\u003c/CodeEditor\u003e\n```\n\n```javascript\ngetContent(content) {\n  console.log(\"The content is: \" + content);\n}\n```\n\n### @textarea\n\nDescription: pass the textarea element as an argument\n\n```html\n\u003cCodeEditor @textarea=\"focus\"\u003e\u003c/CodeEditor\u003e\n```\n\n```javascript\nfocus(node) {\n  node.focus();\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustcaliturner%2Fsimple-code-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjustcaliturner%2Fsimple-code-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustcaliturner%2Fsimple-code-editor/lists"}