Docz: Use gatsby-remark-vscode for syntax highlighting

[losolio]

Would it be possible to replace syntax highlighting by Prism with gatsby-remark-vscode?

Description I would love to use the gatsby-remark-vscode plugin for syntax highlighting instead of Prism.js. Is there any way to do this by using configuration of Docz?

[rakannimer]

Hey @losolio

There are two kinds of code blocks in docz.

The first is embedded in the markdown ( ```js ``` ) and the other used with the Playground component (

<Playground>
    {/* this code is editable by the user */}
    <SomeComponent />
</Playground>

).

For the one in the playground you won't be able to use gatsby-remark-vscode plugin because it's editable and rendered on the client.

For the second you should be able to add gatsby-remark-vscode :

1. Install gatsby-remark-vscode : yarn add gatsby-remark-vscode
2. In your doczrc.js file add :

gatsbyRemarkPlugins: [
  {
    resolve: "gatsby-remark-vscode",
    // OPTIONAL
    options: {}
  }
]

1. By now your site should be broken, you still need to tell docz not to try to render code blocks with prism (to leave it to gatsby-remark-vscode). To do that you will need to remove the pre and code components passed down to the MDXProvider by creating a file src/gatsby-theme-docz/components/index.js (original can be found here) and add to it :

import * as headings from "gatsby-theme-docz/src/components/Headings";
import { Layout } from "gatsby-theme-docz/src/components/Layout";
import { Playground } from "gatsby-theme-docz/src/components/Playground";
import { Props } from "gatsby-theme-docz/src/components/Props";

export default {
  ...headings,
  playground: Playground,
  layout: Layout,
  props: Props
};

Then run yarn docz dev and you should see your code block rendered using gatsby-remark-vscode 🎉 .

[losolio]

Hey @rakannimer!

Thanks for your extensive and excellent answer. By creating the file at src/gatsby-theme-docz/components/Code/index.js, I was able to shadow the Code component. However I do get an warning warn "export 'Code' was not found in './Code', when building. The page have only an grey area, without any syntax highlighting at all.

I am not expecting you to investigate this any further, as I guess it might be my basic React/Gatsby skills who prevents me finishing this. The source code for my docz installation is accessible, but you are free to close this comment!

Thanks again for your effort! 🙂

[rakannimer]

Heyo !

You're welcome ! Thank you for making me aware of gatsby-remark-vscode's existence 😄

You don't need to shadow the Code component. You just need to create src/gatsby-theme-docz/components/index.js and add to it the code I've written above.

I added an example of using docz with gatsby-remark-code here.

Make sure to check it out 👍

Going to close this issue, but feel free to comment here if you encounter any problem !

[losolio]

Hey again, @rakannimer
Just wanted to give an update. I had some more work getting this working, and I am sharing this solution here, in case anyone else has a Gatsby site, with docz theme running, and cannot figure out how to set the gatsbyRemarkPlugin. It has to be set in the gatsby-config.js, for example like this:

    // gatsby-config.js
    {
      resolve: `gatsby-theme-docz`,
      options: {
        themeConfig: {
          mode: `light`,
        },
        ignore: ["README.md", "LICENSE.md"],
        gatsbyRemarkPlugins: [
          {
            resolve: "gatsby-remark-vscode",
            // OPTIONAL
            options: {}
          }
        ]
      },
    },