nuxt-highlightjs's Introduction

nuxt-highlightjs

Highlight.js syntax highlighting for Nuxt.js

Setup

Add nuxt-highlightjs dependency to your project

npm install --save nuxt-highlightjs

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

nuxt-highlightjs's People

Contributors

Stargazers

Watchers

nuxt-highlightjs's Issues

highlightjs line numbers

How can I connect https://github.com/wcoder/highlightjs-line-numbers.js/ ?

Cannot start nuxt: Cannot read property 'options' of undefined

Nuxt version

3.0.0

Node version

14.21.2

Specific error

Cannot restart nuxt: Cannot read property 'options' of undefined

Steps to reproduce

nuxt.config.ts

export default defineNuxtConfig({
  modules: ["nuxt-highlightjs"]
})

index.vue

<pre>
  <code v-highlight class="javascript">console.log('Hello World')</code>
</pre>

connected the plugin
gives an error message
Could not compile template D:\\WebProjects\\frontend\\node_modules\\@nuxt\\vue-app\\template\\App.js: Package subpath './styles/default.css' is not defined by "exports" in D:\WebProjects\frontend\node_modules\highlight.js\package.json

how to fix?

"nuxt": "^2.15.7",

Add newest highlight.js version

When modifying options.css, it should be a string instead of an object

nuxt/tailwindcss will error out since it is trying to parse path instead, please change it so it is not an object. Thanks.

nuxt-modules/tailwindcss#505

https://github.com/Llang8/nuxt-highlightjs/blob/master/lib/module.js#L14

Recommend Projects

llang8 / nuxt-highlightjs Goto Github PK