Gathering detailed insights and metrics for @dans98/vue-prism-editor
Gathering detailed insights and metrics for @dans98/vue-prism-editor
Gathering detailed insights and metrics for @dans98/vue-prism-editor
Gathering detailed insights and metrics for @dans98/vue-prism-editor
A dead simple code editor with syntax highlighting and line numbers. 3kb/gz
npm install @dans98/vue-prism-editor
Typescript
Module System
Node Version
NPM Version
TypeScript (77.74%)
JavaScript (8.11%)
CSS (6.79%)
Vue (5.86%)
HTML (1.5%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
761 Stars
103 Commits
83 Forks
7 Watchers
2 Branches
8 Contributors
Updated on Jul 10, 2025
Latest Version
0.5.2
Package Id
@dans98/vue-prism-editor@0.5.2
Unpacked Size
665.32 kB
Size
185.14 kB
File Count
33
NPM Version
6.9.0
Node Version
10.16.3
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
A dead simple code editor with syntax highlighting and line numbers. 7kb/gz
The goal of this project is to have a simple code editor. You can use to make small changes of some content or you just need a textarea with syntax highlighting. That's what it's good for. If you need an advanced code editor use Codemirror or Monaco Editor.
1npm install vue-prism-editor
or
1yarn add vue-prism-editor
Register the component locally and use it (recommended)
1<template> 2 <prism-editor :code="code" language="js"></prism-editor> 3</template> 4 5<script> 6import PrismEditor from 'vue-prism-editor' 7export default { 8 components: { 9 PrismEditor 10 } 11} 12</script>
Or register the component globally in main.js
1import VuePrismEditor from "vue-prism-editor"; 2import "vue-prism-editor/dist/VuePrismEditor.css"; // import the styles 3Vue.component("prism-editor", VuePrismEditor);
Browser usage:
1<!-- vue-prism-editor JavaScript --> 2<script src="https://unpkg.com/vue-prism-editor"></script> 3 4<!-- vue-prism-editor CSS --> 5<link rel="stylesheet" href="https://unpkg.com/vue-prism-editor/dist/VuePrismEditor.css"> 6 7<!-- use --> 8<script> 9Vue.component('vue-prism-editor', VuePrismEditor) 10new Vue({ 11 el: '#app' 12}) 13</script>
This package won't install Prismjs. If you use Prismjs already skip this step. If not you need to load Prismjs somewhere in your app:
1// yarn add prismjs 2import "prismjs"; 3import "prismjs/themes/prism.css";
OR:
1<link rel="stylesheet" href="https://unpkg.com/prismjs/themes/prism.css" /> 2<script src="https://unpkg.com/prismjs"></script>
Name | Type | Default | Options | Description |
---|---|---|---|---|
v-model | string | - | - | for the code prop below |
code | string | "" | - | the code |
language | String | "js" | vue,html,md,ts + Prismjs Languages | language of the code |
lineNumbers | Boolean | false | - | Whether to show line numbers or not |
readonly | Boolean | false | - | Indicates if the editor is read only or not. |
emitEvents | Boolean | false | - | Indicates if the editor should emit events. |
autoStyleLineNumbers | Boolean | true | - | Allow the line number to be styled by this component. |
Name | Parameters | Description |
---|---|---|
change | (code) | Fires when the code is changed. |
The events below won't be fired unless you set the emitEvents
prop to true
.
Name | Parameters | Description |
---|---|---|
keydown | (event) | This event is emitted when a keydown event happens in editor |
keyup | (event) | This event is emitted when a keyup event happens in editor |
editor-click | (event) | This event is emitted when clicking anywhere in the contenteditable editor |
inspired by react-live.
MIT
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 4/8 approved changesets -- score normalized to 5
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
141 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More