Skip to content

Llang8/nuxt-highlightjs

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
lib
 
 
 
 
 
 
 
 
 
 

nuxt-highlightjs

Highlight.js syntax highlighting for Nuxt.js

NPM Version

Setup

  1. Add nuxt-highlightjs dependency to your project
npm install --save nuxt-highlightjs
  1. Add nuxt-highlightjs to the modules section of nuxt.config.js
  modules: [
    // Simple Usage
    'nuxt-highlightjs',
    
    // With Options
    ['nuxt-highlightjs', {
      // Module Options
    }]
  ],

Usage

In your .vue template:

      <!-- Adding codeblock content in HTML -->
      <pre>
        <code v-highlight class="javascript">console.log('Hello World')</code>
      </pre>

      <!-- Adding codeblock content with a variable 
        (where the variable 'code' lives in your component's data function) -->
      <pre>
        <code v-highlight="code" class="javascript">console.log('Hello World')</code>
      </pre>

The example above uses javascript highlighting, you can change the class on the code element to any of the supported languages to set the highlighting.

Module Options

style

  • Type: string
  • Default: default

Set the highlight.js theme See list of available style options

  modules: [
    // With Options
    ['nuxt-highlightjs', {
      style: 'obsidian'
    }]
  ],

License

MIT

About

Highlight.js syntax highlighting for Nuxt.js

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published