Highlight.js syntax highlighting for Nuxt.js
nuxt-highlightjs
dependency to your projectnpm install --save nuxt-highlightjs
nuxt-highlightjs
to the modules
section of nuxt.config.js
modules: [
// Simple Usage
'nuxt-highlightjs',
// With Options
['nuxt-highlightjs', {
// Module Options
}]
],
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.
style
string
default
Set the highlight.js theme See list of available style options
modules: [
// With Options
['nuxt-highlightjs', {
style: 'obsidian'
}]
],