Codes

Usage in google Docs

If you want to include code in your Google Docs, you have two solutions:

• Embed code from external services
• Format code directly in your documents

Embed code

You can embed external services like CodePen, CodeSandbox or Gist using HTML embed code or using gatsby-plugin-mdx-embed.

Format code

1. Paste a code extract in your document
2. Format your code using Code Blocks extension available on Google Workspace Marketplace
3. (Optional) Add lang:javascript at the first line of your code block to highlight your code

Usage in Gatsby

Thera are a lot of plugins for a better syntax coloration. You can use everything you want but we will see an example using PrismJs.

Installation

Install gatsby-remark-prismjs

yarn add gatsby-remark-prismjs prismjs

Configuration

Dans le fichier gatsby-config.js :

module.exports = {
    plugins: [
        "gatsby-source-google-docs",
        {
            resolve: "gatsby-transformer-remark",
            options: {
                plugins: ["gatsby-remark-prismjs"],
            },
        },
    ],
}