diff --git a/packages/code-snippets-website/content/docs/index.md b/packages/code-snippets-website/content/docs/index.md
index 3a08d37..5fad222 100644
--- a/packages/code-snippets-website/content/docs/index.md
+++ b/packages/code-snippets-website/content/docs/index.md
@@ -31,14 +31,14 @@ I've created a snippet surrounding the header of this very website. If there is
 ### The Markdown:
 
 ````md
-```tsx file=./src/header/header.tsx@header
+```tsx file=./src/header/header.tsx snippet=header
 
 ```
 ````
 
 ### The Output:
 
-```tsx file=./src/header/header.tsx@header
+```tsx file=./src/header/header.tsx snippet=header
 
 ```
 
diff --git a/packages/code-snippets-website/content/docs/preserving-snippets.md b/packages/code-snippets-website/content/docs/preserving-snippets.md
index 460306c..c949ebc 100644
--- a/packages/code-snippets-website/content/docs/preserving-snippets.md
+++ b/packages/code-snippets-website/content/docs/preserving-snippets.md
@@ -4,6 +4,6 @@ slug: '/docs/preserving-snippets'
 
 Sometimes you want to show how `nmbl-code-snippets` works, like when using this very project. In that case, you can add preserve-snippets to the code block metadata, like so:
 
-```md file=content/docs/index.md@preserve-snippets
+```md file=content/docs/index.md snippet=preserve-snippets
 
 ```
diff --git a/packages/code-snippets-website/gatsby-config.js b/packages/code-snippets-website/gatsby-config.js
index 416bf05..617f5cd 100644
--- a/packages/code-snippets-website/gatsby-config.js
+++ b/packages/code-snippets-website/gatsby-config.js
@@ -41,22 +41,19 @@ module.exports = {
       options: {
         plugins: [
           {
-            resolve: 'remark-code-import/gatsby',
+            resolve: '@johnrom/remark-code-import/gatsby',
             options: {
               async: true,
+              basePath: process.cwd(),
             },
           },
           {
             resolve: '@nmbl/gatsby-remark-code-snippets',
-            options: {
-              async: true,
-            },
+            options: {},
           },
           {
             resolve: '@nmbl/gatsby-remark-code-snippet-remover',
-            options: {
-              async: true,
-            },
+            options: {},
           },
         ],
       },
diff --git a/packages/code-snippets-website/package.json b/packages/code-snippets-website/package.json
index c818453..fa2af09 100644
--- a/packages/code-snippets-website/package.json
+++ b/packages/code-snippets-website/package.json
@@ -28,6 +28,7 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
+    "@johnrom/remark-code-import": "0.4.1-beta1",
     "@types/react": "^17.0.35",
     "@types/react-dom": "^17.0.11",
     "gatsby-plugin-postcss": "^4.14.0",
diff --git a/yarn.lock b/yarn.lock
index 7963c3f..4ef1ec1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1781,6 +1781,14 @@
     "@types/yargs" "^16.0.0"
     chalk "^4.0.0"
 
+"@johnrom/remark-code-import@0.4.1-beta1":
+  version "0.4.1-beta1"
+  resolved "https://registry.yarnpkg.com/@johnrom/remark-code-import/-/remark-code-import-0.4.1-beta1.tgz#82754cf9e4ade0f1e7c4b9c8671ecded9b68e42e"
+  integrity sha512-754fjSOKGNI7XcYbSr45bTIDKfXv7mzF8+p9G6iTtIK+y/d2628DpmIRV2wjYVp6wJ+o+hfDuI1Zs5U8JfBX3A==
+  dependencies:
+    to-gatsby-remark-plugin "^0.1.0"
+    unist-util-visit "^2.0.1"
+
 "@lerna/add@4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@lerna/add/-/add-4.0.0.tgz#c36f57d132502a57b9e7058d1548b7a565ef183f"