![Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility](https://cdn.sanity.io/images/cgdhsj6q/production/97774ea8c88cc8f4bed2766c31994ebc38116948-1664x1366.png?w=400&fit=max&auto=format)
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
vue-prism-editor
Advanced tools
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.
npm install vue-prism-editor
or
yarn add vue-prism-editor
Register the component locally and use it (recommended)
<template>
<prism-editor :code="code" language="js"></prism-editor>
</template>
<script>
import PrismEditor from 'vue-prism-editor'
export default {
components: {
PrismEditor
}
}
</script>
Or register the component globally in main.js
import VuePrismEditor from "vue-prism-editor";
import "vue-prism-editor/dist/VuePrismEditor.css"; // import the styles
Vue.component("prism-editor", VuePrismEditor);
Browser usage:
<!-- vue-prism-editor JavaScript -->
<script src="https://unpkg.com/vue-prism-editor"></script>
<!-- vue-prism-editor CSS -->
<link rel="stylesheet" href="https://unpkg.com/vue-prism-editor/dist/VuePrismEditor.css">
<!-- use -->
<script>
Vue.component('vue-prism-editor', VuePrismEditor)
new Vue({
el: '#app'
})
</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:
// yarn add prismjs
import "prismjs";
import "prismjs/themes/prism.css";
OR:
<link rel="stylesheet" href="https://unpkg.com/prismjs/themes/prism.css" />
<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
FAQs
A dead simple code editor with syntax highlighting and line numbers.
The npm package vue-prism-editor receives a total of 22,597 weekly downloads. As such, vue-prism-editor popularity was classified as popular.
We found that vue-prism-editor demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.