Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
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.
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
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.