feat: add remarkPlugins theme option (#821)

* feat: add remarkPlugins theme option

* fix: remarkPlugins doc wording

packages/example/src/pages/guides/configuration.mdx

@@ -203,6 +203,9 @@ plugins: [
 ## Additional remark plugins and override existing remark plugin configuration
 
 - `gatsbyRemarkPlugins` - An array containing gatsby remark plugin configurations to be added/overridden.
+- `remarkPlugins` - An array containing [remark plugin configurations](https://www.gatsbyjs.org/packages/gatsby-plugin-mdx/#remark-plugins) to be added.
+
+The `gatsbyRemarkPlugins` option is compatible with all gatsby-remark-* plugins, for example `gatsby-remark-mermaid`. If a gatsby remark plugin does not work, you can try calling the (underlying) remark plugin directly using the `remarkPlugins` option.
 
 ### Example [Gatsby Remark Mermaid plugin](https://www.gatsbyjs.org/packages/gatsby-remark-mermaid/)
 
@@ -250,3 +253,38 @@ to turn into an image one should add the following configuration to her/his own
   ],
 
 ```
+
+### Example [Remark Grid Tables](https://github.com/zestedesavoir/zmarkdown/tree/master/packages/remark-grid-tables)
+
+For the below markdown snippet:
+
+```
++-------+----------+------+
+| Table Headings   | Here |
++-------+----------+------+
+| Sub   | Headings | Too  |
++=======+==========+======+
+| cell  | column spanning |
++ spans +----------+------+
+| rows  | normal   | cell |
++-------+----------+------+
+| multi | cells can be    |
+| line  | *formatted*     |
+|       | **paragraphs**  |
+| cells |                 |
+| too   |                 |
++-------+-----------------+
+```
+
+After installing the `remark-grid-tables` plugin, add it to the `remarkPlugins` array in the theme options.
+
+```js
+ plugins: [
+    {
+      resolve: 'gatsby-theme-carbon',
+      options: {
+        remarkPlugins: [require("remark-grid-tables")],
+      },
+    },
+  ],
+```

packages/gatsby-theme-carbon/gatsby-config.js

@@ -20,6 +20,7 @@ module.exports = (themeOptions) => {
     pngCompressionSpeed = 4, // default for gatsby-plugin-sharp
     mediumAccount = '',
     gatsbyRemarkPlugins = [],
+    remarkPlugins = [],
   } = themeOptions;
 
   const optionalPlugins = [];
@@ -90,6 +91,7 @@ module.exports = (themeOptions) => {
             ...defaultRemarkPlugins,
             ...gatsbyRemarkPlugins,
           ],
+          remarkPlugins,
           defaultLayouts: {
             default: require.resolve('./src/templates/Default.js'),
             home: require.resolve('./src/templates/Homepage.js'),