Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@highlightjs/vue-plugin

Package Overview
Dependencies
Maintainers
5
Versions
9
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@highlightjs/vue-plugin

Highlight.js Vue Plugin

  • 2.0.0
  • npm
  • Socket score

Version published
Maintainers
5
Created
Source

Highlight.js plugin for Vue.js

latest version latest version vue 3 vue 2 license

publish size gzipped size slack

This plugin provides a highlightjs component for use in your Vue.js 3 applications:

<div id="app">
    <!-- bind to a data property named `code` -->
    <highlightjs autodetect :code="code" />
    <!-- or literal code works as well -->
    <highlightjs language='javascript' code="var x = 5;" />
</div>

Note: For Vue.js version 2 support see the 1-stable branch here on GitHub. The latest tag via NPM is compatible with Vue.js v2; the next tag Vue.js v3.

Using the pre-built libraries

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.min.js"></script>
<script src="/path/to/highlight-vue.min.js"></script>

Then simply register the plugin with Vue:

const app = createApp(App)
app.use(hljsVuePlugin)

Using ES6 modules / bundling

import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
import hljsVuePlugin from "@highlightjs/vue-plugin";

hljs.registerLanguage('javascript', javascript);

const app = createApp(App)
app.use(hljsVuePlugin)
app.mount('#app')

Note: The plugin imports highlight.js/lib/core internally (but no languages). Thanks to the magic of ES6 modules you can import Highlight.js anywhere to register languages or configure the library. Any import of Highlight.js refers to the same singleton instance of the library, so configuring the library anywhere configures it everywhere.

You can also simply load all "common" languages at once (as of v11):

import hljs from 'highlight.js/lib/common';
import hljsVuePlugin from "@highlightjs/vue-plugin";

const app = createApp(App)
app.use(hljsVuePlugin)
app.mount('#app')

Building the pre-built library from source

We use rollup to build the dist distributable.

npm run build

FAQs

Package last updated on 28 May 2021

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc