vue-remark issues with remark plugins

Description

I tried replacing the @gridsome/source-filesystem with the new @gridsome/vue-remark, but ran into issues with remark plugins. When using the @gridsome/vue-remark with @gridsome/remark-prismjs the prism plugin is not working (not tokenizing the html output to apply styling to).

Steps to reproduce

In gridsome.config.js

module.exports = {  
  plugins: [
    {
      // Create posts from markdown files
      use: "@gridsome/vue-remark",
      options: {
        typeName: "Post",
        path: "content/posts/*.md",
        baseDir: "./content/posts",
        template: "./src/templates/Post.vue",
        remark: {
          plugins: ["@gridsome/remark-prismjs"]
        }
      }
    },  
  ],
  
  transformers: {
     remark: {
       plugins: ["@gridsome/remark-prismjs"]
     }
   }
};

Expected result

The prism plugin should add additional token classes to the html generated when using code blocks in markdown.

Actual result

The actual html looks like this (no tokenized output):

<pre><code class="language-css">
.test {
    background: none;
}
</code></pre>

Environment

Libs:
- gridsome version: 0.7.5
- @gridsome/cli version: 0.2.3


For Tooling issues:
- Node version: 11.14.0
- Platform:  Windows

[hjvedvik]

@danrocha I tested your repository now and it seems to work as expected 😃

Here is what I did:

• Removed the transformers config from gridsome.config.js
• Uncommented the plugins option on each @gridsome/vue-remark entry
• Inserted a ## Table of Contents heading after the import statement in ./content/blog/magic-hours-will-make-photography-shine.md

And I got a nested list containing all headings below. Can you try the same and see if it works?

[kai-oswald]

Hey @sebastianluszczek, I cloned your repository and your configuration worked after I made a change in the markdown file. Just be sure to edit the markdown file while in gridsome develop, else it will use an older cached version. I don’t know why it works like this, this is probably an additional bug worthy to report?

Config:

module.exports = {
  plugins: [  
    {
      use: "@gridsome/vue-remark",
      options: {
        typeName: "Project",
        baseDir: "./markdown/projects",
        template: "./src/templates/Project.vue",
        pathPrefix: "/projects",
        route: "/projects/:title"
      }
    },
    {
      use: "@gridsome/vue-remark",
      options: {
        typeName: "Tag",
        baseDir: "./markdown/tags",
        template: "./src/templates/Tag.vue",
        pathPrefix: "/blog/tags"
      },
    },  
    {
      use: "@gridsome/vue-remark",
      options: {
        typeName: "Post",
        baseDir: "./markdown/posts",
        template: "./src/templates/Post.vue",
        pathPrefix: "/posts",
        route: "/blog/:slug",
        refs: {
          tags: "Tag"
        },
        plugins: ["@gridsome/remark-prismjs"]
      }
    },
  ]

}

Generated HTML:

<pre class="language-js"><code class="language-js"><span class="token comment">// src/index.jse</span>

<span class="token keyword">import</span> express <span class="token keyword">from</span> <span class="token string">"express"</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">express</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

app<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">5000</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Server started on port 5000!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>