nuxt-community / nuxtent-module

Seamlessly use content files in your Nuxt.js sites.
https://nuxtent-module.netlify.com/guide
MIT License
388 stars 50 forks source link

Unable to extend markdown parser #164

Closed Gingernaut closed 6 years ago

Gingernaut commented 6 years ago

Version

1.4.1

Reproduction link

https://github.com/Gingernaut/gingernaut.github.io/tree/dev

Steps to reproduce

Extending the markdown parser in my nuxtent.config.js does not work, using the Prism.js configuration at https://nuxtent.now.sh/guide/configuration#parser-options.

My entire nuxtent config:


const Prism = require('prismjs')

module.exports = {
  content: [
    ['blog', {
      page: '/blog/my-article',
      permalink: '/blog/:slug',
      isPost: true,
      generate: [
        'get',
        'getAll'
      ]
    }]],
  api: {
    baseURL: 'http://localhost:3000',
    browserBaseURL: 'http://localhost:3000'
  },
  md: {
    extend (config) {
      config.highlight = (code, lang) => {
        return `<pre class="language-${lang}"><code class="language-${lang}">${Prism.highlight(code, Prism.languages[lang], Prism.languages[lang])}</code></pre>`
      }
    }
  }
}

I've added the nuxtent module in my nuxt.config.js, and that is where I also load the prism CSS with:

  css: [
    'prismjs/themes/prism-okaidia.css'
  ]

What is expected ?

The markdown parser to properly extend the highlight option to use Prism js to highlihgt my

tags.

What is actually happening?

All of the 'pre' syntax highlighting loads from the css for the theme, rendering the text white with a shadow. However the rendered html does not have any of span tags parsed by Prism, and pre tag does not have the class applied either. Effectively, There is no difference in the page whether I extend the markdown parser or not.

This bug report is available on Nuxt.js community (#c125)
davidroyer commented 6 years ago

@Gingernaut

Try this and see if it works for you.

  parsers: {
    md: {
      extend(config) {
        config.highlight = (code, lang) => {
          return `<pre class="language-${lang}"><code class="language-${lang}">${Prism.highlight(code, Prism.languages[lang] || Prism.languages.markup)}</code></pre>`
        }
      }
    }
  }
Gingernaut commented 6 years ago

That did work for me, thanks for the help.

davidroyer commented 6 years ago

No problem at all. :thumbsup: