nuxt-highlightjs

nuxt-highlightjs JS library on GitHub nuxt-highlightjs JS library on npm Download nuxt-highlightjs JS library

Highlightjs code block styling and syntax highlighting for Nuxt 2

Version 1.0.3 License MIT
nuxt-highlightjs has no homepage
nuxt-highlightjs JS library on GitHub
nuxt-highlightjs JS library on npm
Download nuxt-highlightjs JS library
Keywords
nuxtnuxtjsvuevuejshighlighthighlight.jscodehighlightingcodeblock

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