Highlight.js syntax highlighter component for Vue

Highlight.js syntax highlighter component for Vue

Vue Highlight.js Highlight.js syntax highlighter component for Vue.

Vue Highlight.js

πŸ“œ Highlight.js syntax highlighter component for Vue.

βš™οΈ Installation

Via npm:

npm install highlight.js vue-highlight.js

Or Yarn:

yarn add highlight.js vue-highlight.js

For TypeScript, Please install @types/highlight.js.

npm install --save-dev @types/highlight.js
# or
yarn add --dev @types/highlight.js

🎬 Demo

Go to https://gluons.github.io/vue-highlight.js

πŸ›‚ Usage

Main file:

There are 2 ways to import Highlight.js languages.

  1. Import only languages that you want.

    import Vue from 'vue';
    import VueHighlightJS from 'vue-highlight.js';
    
    // Highlight.js languages (Only required languages)
    import css from 'highlight.js/lib/languages/css';
    import javascript from 'highlight.js/lib/languages/javascript';
    import vue from 'vue-highlight.js/lib/languages/vue';
    
    /*
    * Import Highlight.js theme
    * Find more: https://highlightjs.org/static/demo/
    */
    import 'highlight.js/styles/default.css';
    
    import App from './App';
    
    /*
    * Use Vue Highlight.js
    */
    Vue.use(VueHighlightJS, {
        // Register only languages that you want
        languages: {
            css,
            javascript,
            vue
        }
    });
    
    new Vue({
        el: '#app',
        render: h => h(App)
    });
  2. Import all languages.

    import Vue from 'vue';
    import VueHighlightJS from 'vue-highlight.js';
    
    // Highlight.js languages (All languages)
    import 'vue-highlight.js/lib/allLanguages'
    
    /*
    * Import Highlight.js theme
    * Find more: https://highlightjs.org/static/demo/
    */
    import 'highlight.js/styles/default.css';
    
    import App from './App';
    
    /*
    * Use Vue Highlight.js
    */
    Vue.use(VueHighlightJS);
    
    new Vue({
        el: '#app',
        render: h => h(App)
    });

Vue file:

<template>
    <div id="app">
        <!-- Code Block -->
        <highlight-code lang="javascript">
            let str = 'Hello, World!';
            console.log(str);
        </highlight-code>

        <!-- Inline Code Block -->
        <highlight-code lang="javascript" inline>alert('Hello, World!');</highlight-code>
    </div>
</template>

<script>
// JavaScript...
</script>

<style>
/* StyleSheet... */
</style>

β›• Plugin Options

languages

Type: { [name: string]: HLJSLang } Default: {}

Highlight.js languages. Add the languages that you want to use here.

name is the name of language to register with Highlight.js' registerLanguage(name, language) API.

See https://github.com/isagalaev/highlight.js#commonjs about importing each language from highlight.js.

πŸ“š API

<highlight-code>

Highlight.js code block.

πŸ”° Slots

Static code content.

πŸ”° Properties

lang

Type: String

Highlight.js language.

inline

Type: Boolean Default: false

Enable inline code block when set it to true.

code

Type: String

Code content in code block.

You can use this prop if you want to bind code content to your data source. It's useful for dynamic code content.

Component will ignore slot static content if you use this.

auto

Type: Boolean

Enable auto detecting code language.

Code will be detected by highlight.js' highlightAuto function.

auto will work well when you import all Highlight.js languages.

Component will ignore lang prop if you use auto.

❓ FAQ

  • How to write HTML code inside slot?

    You have to escape all HTML tags before add it into slot. If you didn't do that, browser will interpret those tags as HTML element. ℹ️ See isagalaev/highlight.js#866

    If you use code property instead of slot, you don't need to worry about this. Vue Highlight.js will automatically escape it for you.

  • Why did I get SyntaxError: Unterminated template literal error when used <script></script> in code property?

    If you add </script> at anywhere inside script tag, although it's a string inside quotes, it will always close the script tag. ℹ️ See "Unterminated template literal" syntax error when literal contains script tag

Download Details:

Author: gluons

Demo: https://gluons.github.io/vue-highlight.js/

Source Code: https://github.com/gluons/vue-highlight.js

vue vuejs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native is a framework to build cross platform native mobile apps using JavaScript. It is a wrapper around the APIs of React Native. So, with Vue Native, you can do everything that you can do with React Native. With Vue Native, you get

How to Make a Simple Vue Custom Select Component

In this article, you’ll learn how to build a Vue custom select component that can be easily be styled using your own CSS. In fact, it’s the same component that we use in production on Qvault, and you can see it in action on the playground.

Creating a Custom Tooltip Component in Vue

There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.