It doesn't highlight the code attributes, classes etc.

[aidensgithub]

It only highlights the code background css - only "hljs" class is being attached to the codeblock. Probably it's not parsing the code elements or there is an issue with the highlight.js which doesn't append other css classes.

.vue file ` div class="paragraph" v-html="rendevue(k.text)"

methods: { rendevue (a) { // const hljs = require('highlight.js/lib/core') const md = require('markdown-it')() .use(require('markdown-it-highlightjs')) return md.render(${a}) } },`

.nuxt conifg markdownit: { injected: true, use: [ 'markdown-it-highlightjs', ], },

output

[valeriangalliat]

Hey! Sorry I missed this issue, is this still valid? My first thoughts is that the markdown source doesn't include a language indication and that's why it's not added to the class, e.g. opening of code block looks like ``` and not ```js.

Or maybe you want highlight.js to automatically try to detect the language, then you should use the auto: true option (I'm not sure how to pass options to markdown-it plugins with Nuxt.js).

[SaadAhmedGit]

You would need to import the css theme file from highlight.js like this:

import "highlight.js/styles/atom-one-dark.css";

[mrleblanc101]

I was also confused by this. Why is there no indication that you also no to install highlight.js seperatly and import a stylesheet in the docs ?

[valeriangalliat]

Ahhh I understand the confusion. I added a note first thing in the readme to explain that this only add span element with specific classes that need to be styled separately with CSS, e.g. using one of the highlight.js predefined themes