nuxt-highlightjs

nuxt-highlightjs

Highlight.js syntax highlighting for Nuxt.js

Setup

1. Add nuxt-highlightjs dependency to your project

npm install --save nuxt-highlightjs

2. 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