Using markdown-it plugin breaks the subcomponents inside the markdown file in nuxt about frontmatter-markdown-loader HOT 6 CLOSED

I just confirmed markdownIt({ html: true }).use(markdownItPrism) works correctly in the sample repo.
hmsk/frontmatter-markdown-loader-nuxt-sample#2

I guess you missed to provide a stylesheet which markdown-it-prism requires.

The plugin will insert the necessary markup into all code blocks. Include one of Prism’s stylesheets in your HTML to get highlighted code.

https://github.com/jGleitz/markdown-it-prism

In Nuxt, adding prismjs/themes/prism.css (this referrs node_modules/prismjs/...) in css block on nuxt.config.(ts|js) is the quickest way.

https://github.com/hmsk/frontmatter-markdown-loader-nuxt-sample/blob/2ce32c91dcadc9c65786369965c3942817451c8a/nuxt.config.js#L17-L20

from frontmatter-markdown-loader.

Thanks for looking into this @hmsk . I did have the stylesheet required by markdown-it-prism. I checked your code and it still didn't work.

However, I was able to solve it doing the following:

var md = require("markdown-it")({html:true}).use(require("markdown-it-prism"));

css: [
    'prismjs/themes/prism-vsc-dark-plus.css',
  ],

build: {
    extend(config, ctx) {
      config.module.rules.push({
        test: /\.md$/,
        include: [
          path.resolve(__dirname, "content"),
        ],
        loader: "frontmatter-markdown-loader",
        options: {
          mode: [Mode.VUE_COMPONENT],
          markdown: body => {
            return md.render(body);
          }
        }
      });
  }

So for some reason that is not clear to me it did not work using the markdownIt options when extending the webpack config. But it worked when using the markdown option. This is however not the way is shown in the documentation. Maybe you can clarify?

Thank you

from frontmatter-markdown-loader.

As we can see the actual working example hmsk/frontmatter-markdown-loader-nuxt-sample#2 (comment) on our browser, I think it's just your local's trouble.

Happy to look into more if you provide a reproducible repository 😉

from frontmatter-markdown-loader.

Closing this issue since we don't have any discussion over a week. I welcome to reopen when a reproducible repository is provided.

from frontmatter-markdown-loader.

I found the missing piece between us. I found the object by require('markdown-it') doesn't work for markdownIt option. However, my codes in sample repo were using import MarkdownIt from 'markdown-it'. The root problem is fixed in https://github.com/hmsk/frontmatter-markdown-loader/releases/tag/v3.6.0 😉

from frontmatter-markdown-loader.

Thanks for looking into this @hmsk (and apologies for the late reply have been busy with other things). I will take a look at the changes this week and will let you know if I still run into some issues. This looks very promising though, thanks again.

from frontmatter-markdown-loader.